{{-- <div>
    <!-- row 1 -->
    <div class="flex flex-wrap -mx-3">
        <!-- card1 -->
        <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
            <div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="flex flex-row -mx-3">
                        <div class="flex-none w-2/3 max-w-full px-3">
                            <div>
                                <p class="mb-0 font-sans font-semibold leading-normal text-size-sm">Today's Money</p>
                                <h5 class="mb-0 font-bold">
                                    $53,000
                                    <span
                                        class="leading-normal text-size-sm font-weight-bolder text-lime-500">+55%</span>
                                </h5>
                            </div>
                        </div>
                        <div class="px-3 text-right basis-1/3">
                            <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-fuchsia">
                                <i class="ni ni-money-coins text-size-lg relative top-3.5 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- card2 -->
        <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
            <div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="flex flex-row -mx-3">
                        <div class="flex-none w-2/3 max-w-full px-3">
                            <div>
                                <p class="mb-0 font-sans font-semibold leading-normal text-size-sm">Today's Users
                                </p>
                                <h5 class="mb-0 font-bold">
                                    2,300
                                    <span
                                        class="leading-normal text-size-sm font-weight-bolder text-lime-500">+3%</span>
                                </h5>
                            </div>
                        </div>
                        <div class="px-3 text-right basis-1/3">
                            <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-fuchsia">
                                <i class="ni ni-world text-size-lg relative top-3.5 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- card3 -->
        <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
            <div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="flex flex-row -mx-3">
                        <div class="flex-none w-2/3 max-w-full px-3">
                            <div>
                                <p class="mb-0 font-sans font-semibold leading-normal text-size-sm">New Clients</p>
                                <h5 class="mb-0 font-bold">
                                    +3,462
                                    <span class="leading-normal text-red-600 text-size-sm font-weight-bolder">-2%</span>
                                </h5>
                            </div>
                        </div>
                        <div class="px-3 text-right basis-1/3">
                            <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-fuchsia">
                                <i class="ni ni-paper-diploma text-size-lg relative top-3.5 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- card4 -->
        <div class="w-full max-w-full px-3 sm:w-1/2 sm:flex-none xl:w-1/4">
            <div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="flex flex-row -mx-3">
                        <div class="flex-none w-2/3 max-w-full px-3">
                            <div>
                                <p class="mb-0 font-sans font-semibold leading-normal text-size-sm">Sales</p>
                                <h5 class="mb-0 font-bold">
                                    $103,430
                                    <span
                                        class="leading-normal text-size-sm font-weight-bolder text-lime-500">+5%</span>
                                </h5>
                            </div>
                        </div>
                        <div class="px-3 text-right basis-1/3">
                            <div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-fuchsia">
                                <i class="ni ni-cart text-size-lg relative top-3.5 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- cards row 2 -->
    <div class="flex flex-wrap mt-6 -mx-3">
        <div class="w-full px-3 mb-6 lg:mb-0 lg:w-7/12 lg:flex-none">
            <div class="relative flex flex-col min-w-0 break-words bg-white shadow-soft-xl rounded-2xl bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="flex flex-wrap -mx-3">
                        <div class="max-w-full px-3 lg:w-1/2 lg:flex-none">
                            <div class="flex flex-col h-full">
                                <p class="pt-2 mb-1 font-semibold">Built by developers</p>
                                <h5 class="font-bold">Soft UI Dashboard</h5>
                                <p class="mb-12">From colors, cards, typography to complex elements, you will find
                                    the full documentation.</p>
                                <a class="mt-auto mb-0 font-semibold leading-normal text-size-sm group text-slate-500"
                                    href="javascript:;">
                                    Read More
                                    <i
                                        class="fas fa-arrow-right ease-bounce text-size-sm group-hover:translate-x-1.25 ml-1 leading-normal transition-all duration-200"></i>
                                </a>
                            </div>
                        </div>
                        <div class="max-w-full px-3 mt-12 ml-auto text-center lg:mt-0 lg:w-5/12 lg:flex-none">
                            <div class="h-full bg-gradient-fuchsia rounded-xl">
                                <img src="../assets/img/shapes/waves-white.svg"
                                    class="absolute top-0 hidden w-1/2 h-full lg:block" alt="waves" />
                                <div class="relative flex items-center justify-center h-full">
                                    <img class="relative z-20 w-full pt-6"
                                        src="../assets/img/illustrations/rocket-white.png" alt="rocket" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full max-w-full px-3 lg:w-5/12 lg:flex-none">
            <div
                class="border-black/12.5 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border p-4">
                <div class="relative h-full overflow-hidden bg-cover rounded-xl"
                    style="background-image: url('../assets/img/ivancik.jpg')">
                    <span
                        class="absolute top-0 left-0 w-full h-full bg-center bg-cover bg-gradient-dark-gray opacity-80"></span>
                    <div class="relative z-10 flex flex-col flex-auto h-full p-4">
                        <h5 class="pt-2 mb-6 font-bold text-white">Work with the rockets</h5>
                        <p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. It is
                            all about who take the opportunity first.</p>
                        <a class="mt-auto mb-0 font-semibold leading-normal text-white group text-size-sm"
                            href="javascript:;">
                            Read More
                            <i
                                class="fas fa-arrow-right ease-bounce text-size-sm group-hover:translate-x-1.25 ml-1 leading-normal transition-all duration-200"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- cards row 3 -->

    <div class="flex flex-wrap mt-6 -mx-3">
        <div class="w-full max-w-full px-3 mt-0 mb-6 lg:mb-0 lg:w-5/12 lg:flex-none">
            <div
                class="border-black/12.5 shadow-soft-xl relative z-20 flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border">
                <div class="flex-auto p-4">
                    <div class="py-4 pr-1 mb-4 bg-gradient-dark-gray rounded-xl">
                        <div>
                            <canvas id="chart-bars" height="170"></canvas>
                        </div>
                    </div>
                    <h6 class="mt-6 mb-0 ml-2">Active Users</h6>
                    <p class="ml-2 leading-normal text-size-sm">(<span class="font-bold">+23%</span>) than last week
                    </p>
                    <div class="w-full px-6 mx-auto max-w-screen-2xl rounded-xl">
                        <div class="flex flex-wrap mt-0 -mx-3">
                            <div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
                                <div class="flex mb-2">
                                    <div
                                        class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-fuchsia text-neutral-900">
                                        <svg width="10px" height="10px" viewBox="0 0 40 44" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <title>document</title>
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF"
                                                    fill-rule="nonzero">
                                                    <g transform="translate(1716.000000, 291.000000)">
                                                        <g transform="translate(154.000000, 300.000000)">
                                                            <path class="color-background"
                                                                d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z"
                                                                opacity="0.603585379"></path>
                                                            <path class="color-background"
                                                                d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z">
                                                            </path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs">Users</p>
                                </div>
                                <h4 class="font-bold">36K</h4>
                                <div class="text-size-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
                                    <div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-3/5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all"
                                        role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
                                <div class="flex mb-2">
                                    <div
                                        class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-cyan text-neutral-900">
                                        <svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <title>spaceship</title>
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF"
                                                    fill-rule="nonzero">
                                                    <g transform="translate(1716.000000, 291.000000)">
                                                        <g transform="translate(4.000000, 301.000000)">
                                                            <path class="color-background"
                                                                d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z">
                                                            </path>
                                                            <path class="color-background"
                                                                d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z">
                                                            </path>
                                                            <path class="color-background"
                                                                d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
                                                                opacity="0.598539807"></path>
                                                            <path class="color-background"
                                                                d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
                                                                opacity="0.598539807"></path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs">Clicks</p>
                                </div>
                                <h4 class="font-bold">2m</h4>
                                <div class="text-size-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
                                    <div class="duration-600 ease-soft -mt-0.38 w-9/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all"
                                        role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
                                <div class="flex mb-2">
                                    <div
                                        class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-orange text-neutral-900">
                                        <svg width="10px" height="10px" viewBox="0 0 43 36" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <title>credit-card</title>
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
                                                    fill-rule="nonzero">
                                                    <g transform="translate(1716.000000, 291.000000)">
                                                        <g transform="translate(453.000000, 454.000000)">
                                                            <path class="color-background"
                                                                d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
                                                                opacity="0.593633743"></path>
                                                            <path class="color-background"
                                                                d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
                                                            </path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs">Sales</p>
                                </div>
                                <h4 class="font-bold">435$</h4>
                                <div class="text-size-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
                                    <div class="duration-600 ease-soft -mt-0.38 w-3/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all"
                                        role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                            <div class="flex-none w-1/4 max-w-full py-4 pl-0 pr-3 mt-0">
                                <div class="flex mb-2">
                                    <div
                                        class="flex items-center justify-center w-5 h-5 mr-2 text-center bg-center rounded fill-current shadow-soft-2xl bg-gradient-red text-neutral-900">
                                        <svg width="10px" height="10px" viewBox="0 0 40 40" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink">
                                            <title>settings</title>
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF"
                                                    fill-rule="nonzero">
                                                    <g transform="translate(1716.000000, 291.000000)">
                                                        <g transform="translate(304.000000, 151.000000)">
                                                            <polygon class="color-background" opacity="0.596981957"
                                                                points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667">
                                                            </polygon>
                                                            <path class="color-background"
                                                                d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
                                                                opacity="0.596981957"></path>
                                                            <path class="color-background"
                                                                d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z">
                                                            </path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs">Items</p>
                                </div>
                                <h4 class="font-bold">43</h4>
                                <div class="text-size-xs h-0.75 flex w-3/4 overflow-visible rounded-lg bg-gray-200">
                                    <div class="duration-600 ease-soft -mt-0.38 -ml-px flex h-1.5 w-1/2 flex-col justify-center overflow-hidden whitespace-nowrap rounded-lg bg-slate-700 text-center text-white transition-all"
                                        role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full max-w-full px-3 mt-0 lg:w-7/12 lg:flex-none">
            <div
                class="border-black/12.5 shadow-soft-xl relative z-20 flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border">
                <div class="border-black/12.5 mb-0 rounded-t-2xl border-b-0 border-solid bg-white p-6 pb-0">
                    <h6>Sales overview</h6>
                    <p class="leading-normal text-size-sm">
                        <i class="fa fa-arrow-up text-lime-500"></i>
                        <span class="font-semibold">4% more</span> in 2021
                    </p>
                </div>
                <div class="flex-auto p-4">
                    <div>
                        <canvas id="chart-line" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- cards row 4 -->

    <div class="flex flex-wrap my-6 -mx-3">
        <!-- card 1 -->

        <div class="w-full max-w-full px-3 mt-0 mb-6 md:mb-0 md:w-1/2 md:flex-none lg:w-2/3 lg:flex-none">
            <div
                class="border-black/12.5 shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border">
                <div class="border-black/12.5 mb-0 rounded-t-2xl border-b-0 border-solid bg-white p-6 pb-0">
                    <div class="flex flex-wrap mt-0 -mx-3">
                        <div class="flex-none w-7/12 max-w-full px-3 mt-0 lg:w-1/2 lg:flex-none">
                            <h6>Projects</h6>
                            <p class="mb-0 leading-normal text-size-sm">
                                <i class="fa fa-check text-cyan-500"></i>
                                <span class="ml-1 font-semibold">30 done</span>
                                this month
                            </p>
                        </div>
                        <div class="flex-none w-5/12 max-w-full px-3 my-auto text-right lg:w-1/2 lg:flex-none">
                            <div class="relative pr-6 lg:float-right">
                                <a dropdown-trigger class="cursor-pointer" aria-expanded="false">
                                    <i class="fa fa-ellipsis-v text-slate-400"></i>
                                </a>
                                <p class="hidden transform-dropdown-show"></p>

                                <ul dropdown-menu
                                    class="z-100 text-size-sm transform-dropdown shadow-soft-3xl duration-250 before:duration-350 before:font-awesome before:ease-soft min-w-44 -ml-34 before:text-5.5 pointer-events-none absolute top-0 m-0 mt-2 list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all before:absolute before:top-0 before:right-7 before:left-auto before:z-40 before:text-white before:transition-all before:content-['\f0d8']">
                                    <li class="relative">
                                        <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg border-0 bg-transparent px-4 text-left font-normal text-slate-500 lg:transition-colors lg:duration-300"
                                            href="javascript:;">Action</a>
                                    </li>
                                    <li class="relative">
                                        <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg border-0 bg-transparent px-4 text-left font-normal text-slate-500 lg:transition-colors lg:duration-300"
                                            href="javascript:;">Another action</a>
                                    </li>
                                    <li class="relative">
                                        <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg border-0 bg-transparent px-4 text-left font-normal text-slate-500 lg:transition-colors lg:duration-300"
                                            href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-auto p-6 px-0 pb-2">
                    <div class="overflow-x-auto">
                        <table class="items-center w-full mb-0 align-top border-gray-200 text-slate-500">
                            <thead class="align-bottom">
                                <tr>
                                    <th
                                        class="px-6 py-3 font-bold tracking-normal text-left uppercase align-middle bg-transparent border-b letter border-b-solid text-size-xxs whitespace-nowrap border-b-gray-200 text-slate-400 opacity-70">
                                        Companies</th>
                                    <th
                                        class="px-6 py-3 pl-2 font-bold tracking-normal text-left uppercase align-middle bg-transparent border-b letter border-b-solid text-size-xxs whitespace-nowrap border-b-gray-200 text-slate-400 opacity-70">
                                        Members</th>
                                    <th
                                        class="px-6 py-3 font-bold tracking-normal text-center uppercase align-middle bg-transparent border-b letter border-b-solid text-size-xxs whitespace-nowrap border-b-gray-200 text-slate-400 opacity-70">
                                        Budget</th>
                                    <th
                                        class="px-6 py-3 font-bold tracking-normal text-center uppercase align-middle bg-transparent border-b letter border-b-solid text-size-xxs whitespace-nowrap border-b-gray-200 text-slate-400 opacity-70">
                                        Completion</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-xd.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="xd" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Soft UI XD Version
                                                </h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-1.jpg" class="w-full rounded-full"
                                                    alt="team1" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Ryan Tompson
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-2.jpg" class="w-full rounded-full"
                                                    alt="team2" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Romina Hadid
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-3.jpg" class="w-full rounded-full"
                                                    alt="team3" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Alexander Smith
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="team4" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Jessica Doe
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-b text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> $14,000 </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">60%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-cyan -mt-0.38 -ml-px flex h-1.5 w-3/5 flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="60" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-atlassian.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="atlassian" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Add Progress Track
                                                </h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-2.jpg" class="w-full rounded-full"
                                                    alt="team5" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Romina Hadid
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="team6" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Jessica Doe
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-b text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> $3,000 </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">10%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-cyan -mt-0.38 w-1/10 -ml-px flex h-1.5 flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="10" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-slack.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="team7" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Fix Platform Errors
                                                </h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-3.jpg" class="w-full rounded-full"
                                                    alt="team8" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Romina Hadid
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-1.jpg" class="w-full rounded-full"
                                                    alt="team9" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Jessica Doe
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-b text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> Not set </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">100%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-lime -mt-0.38 -ml-px flex h-1.5 w-full flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-spotify.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="spotify" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Launch our Mobile App
                                                </h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="user1" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Ryan Tompson
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-3.jpg" class="w-full rounded-full"
                                                    alt="user2" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Romina Hadid
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="user3" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Alexander Smith
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-1.jpg" class="w-full rounded-full"
                                                    alt="user4" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Jessica Doe
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-b text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> $20,500 </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">100%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-lime -mt-0.38 -ml-px flex h-1.5 w-full flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                                    aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-jira.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="jira" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Add the New Pricing
                                                    Page</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="user5" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Ryan Tompson
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-b text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> $500 </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">25%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-cyan -mt-0.38 -ml-px flex h-1.5 w-1/4 flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="25" aria-valuemin="0"
                                                    aria-valuemax="25"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 align-middle bg-transparent border-0 whitespace-nowrap">
                                        <div class="flex px-2 py-1">
                                            <div>
                                                <img src="../assets/img/small-logos/logo-invision.svg"
                                                    class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-size-sm h-9 w-9 rounded-xl"
                                                    alt="invision" />
                                            </div>
                                            <div class="flex flex-col justify-center">
                                                <h6 class="mb-0 leading-normal text-size-sm">Redesign New Online
                                                    Shop</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-0 whitespace-nowrap">
                                        <div class="mt-2 avatar-group">
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-1.jpg" class="w-full rounded-full"
                                                    alt="user6" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Ryan Tompson
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                            <a href="javascript:;"
                                                class="relative z-20 inline-flex items-center justify-center w-6 h-6 -ml-4 text-white transition-all duration-200 border-2 border-white border-solid rounded-full ease-soft-in-out text-size-xs hover:z-30"
                                                data-target="tooltip_trigger" data-placement="bottom">
                                                <img src="../assets/img/team-4.jpg" class="w-full rounded-full"
                                                    alt="user7" />
                                            </a>
                                            <div data-target="tooltip"
                                                class="hidden px-2 py-1 text-white bg-black rounded-lg text-size-sm"
                                                role="tooltip">
                                                Jessica Doe
                                                <div class="invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']"
                                                    data-popper-arrow></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        class="p-2 leading-normal text-center align-middle bg-transparent border-0 text-size-sm whitespace-nowrap">
                                        <span class="font-semibold leading-tight text-size-xs"> $2,000 </span>
                                    </td>
                                    <td class="p-2 align-middle bg-transparent border-0 whitespace-nowrap">
                                        <div class="w-3/4 mx-auto">
                                            <div>
                                                <div>
                                                    <span class="font-semibold leading-tight text-size-xs">40%</span>
                                                </div>
                                            </div>
                                            <div
                                                class="text-size-xs h-0.75 w-30 m-0 flex overflow-visible rounded-lg bg-gray-200">
                                                <div class="duration-600 ease-soft bg-gradient-cyan -mt-0.38 -ml-px flex h-1.5 w-2/5 flex-col justify-center overflow-hidden whitespace-nowrap rounded bg-fuchsia-500 text-center text-white transition-all"
                                                    role="progressbar" aria-valuenow="40" aria-valuemin="0"
                                                    aria-valuemax="40"></div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- card 2 -->

        <div class="w-full max-w-full px-3 md:w-1/2 md:flex-none lg:w-1/3 lg:flex-none">
            <div
                class="border-black/12.5 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border">
                <div class="border-black/12.5 mb-0 rounded-t-2xl border-b-0 border-solid bg-white p-6 pb-0">
                    <h6>Orders overview</h6>
                    <p class="leading-normal text-size-sm">
                        <i class="fa fa-arrow-up text-lime-500"></i>
                        <span class="font-semibold">24%</span> this month
                    </p>
                </div>
                <div class="flex-auto p-4">
                    <div
                        class="before:border-r-solid relative before:absolute before:top-0 before:left-4 before:h-full before:border-r-2 before:border-r-slate-100 before:content-[''] before:lg:-ml-px">
                        <div class="relative mb-4 mt-0 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-bell-55 leading-pro bg-gradient-lime bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">$2400,
                                    Design changes</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">22 DEC
                                    7:20 PM</p>
                            </div>
                        </div>
                        <div class="relative mb-4 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-html5 leading-pro bg-gradient-red bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">New order
                                    #1832412</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">21 DEC
                                    11 PM</p>
                            </div>
                        </div>
                        <div class="relative mb-4 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-cart leading-pro bg-gradient-cyan bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">Server
                                    payments for April</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">21 DEC
                                    9:34 PM</p>
                            </div>
                        </div>
                        <div class="relative mb-4 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-credit-card leading-pro bg-gradient-orange bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">New card
                                    added for order #4395133</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">20 DEC
                                    2:20 AM</p>
                            </div>
                        </div>
                        <div class="relative mb-4 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-key-25 leading-pro bg-gradient-fuchsia bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">Unlock
                                    packages for development</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">18 DEC
                                    4:54 AM</p>
                            </div>
                        </div>
                        <div class="relative mb-0 after:clear-both after:table after:content-['']">
                            <span
                                class="w-6.5 h-6.5 text-size-base absolute left-4 z-10 inline-flex -translate-x-1/2 items-center justify-center rounded-full bg-white text-center font-semibold">
                                <i
                                    class="relative z-10 text-transparent ni ni-money-coins leading-pro bg-gradient-dark-gray bg-clip-text fill-transparent"></i>
                            </span>
                            <div class="ml-11.252 pt-1.4 lg:max-w-120 relative -top-1.5 w-auto">
                                <h6 class="mb-0 font-semibold leading-normal text-size-sm text-slate-700">New order
                                    #9583120</h6>
                                <p class="mt-1 mb-0 font-semibold leading-tight text-size-xs text-slate-400">17 DEC
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}

<!-- Page Content -->
<main id="page-content" class="flex max-w-full flex-auto flex-col ">
    <!-- Page Section -->
    <div class="container mx-auto space-y-10 px-4 py-8 lg:space-y-16 lg:px-8 lg:py-12 xl:max-w-7xl">
        <!-- Quick Stats -->
        <div>
            <h2 class="mb-1 text-2xl font-semibold">{{ __('tables.statistique') }}</h2>

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-6 xl:grid-cols-4">
                <!-- New Leads Card -->
                <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-pink-50 transition hover:bg-pink-100 active:bg-pink-50">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-pink-600">{{ number_format($nbrpayer, 2, ',', ' ') }}
                                {{ __('tables.da') }}
                            </dt>
                            <dd class="text-sm font-medium text-pink-900">
                                {{ __('tables.montant_restants') }}
                            </dd>
                        </dl>
                        <svg class="hi-mini hi-arrow-uturn-up inline-block h-10 w-10 text-pink-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M17.768 7.793a.75.75 0 01-1.06-.025L12.75 3.622v10.003a5.375 5.375 0 01-10.75 0V10.75a.75.75 0 011.5 0v2.875a3.875 3.875 0 007.75 0V3.622L7.293 7.768a.75.75 0 01-1.086-1.036l5.25-5.5a.75.75 0 011.085 0l5.25 5.5a.75.75 0 01-.024 1.06z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                </a>
                <!-- END New Leads Card -->

                <!-- Projects Card -->
                <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-sky-50 transition hover:bg-sky-100 active:bg-sky-50">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-sky-600">{{ $nbrabsent }}</dt>
                            <dd class="text-sm font-medium text-sky-900">{{ __('sidebar.absences') }}</dd>
                        </dl>
                        <svg class="hi-mini hi-briefcase inline-block h-10 w-10 text-sky-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
                                clip-rule="evenodd" />
                            <path
                                d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
                        </svg>
                    </div>
                </a>
                <!-- END Projects Card -->

                <!-- Tickets Card -->
                <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-purple-50 transition hover:bg-purple-100 active:bg-purple-50">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-purple-600">{{ $nbrmessage }}</dt>
                            <dd class="text-sm font-medium text-purple-900">
                                {{ __('sidebar.messages') }}
                            </dd>
                        </dl>
                        <svg class="hi-mini hi-lifebuoy inline-block h-10 w-10 text-purple-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M7.171 4.146l1.947 2.466a3.514 3.514 0 011.764 0l1.947-2.466a6.52 6.52 0 00-5.658 0zm8.683 3.025l-2.466 1.947c.15.578.15 1.186 0 1.764l2.466 1.947a6.52 6.52 0 000-5.658zm-3.025 8.683l-1.947-2.466c-.578.15-1.186.15-1.764 0l-1.947 2.466a6.52 6.52 0 005.658 0zM4.146 12.83l2.466-1.947a3.514 3.514 0 010-1.764L4.146 7.171a6.52 6.52 0 000 5.658zM5.63 3.297a8.01 8.01 0 018.738 0 8.031 8.031 0 012.334 2.334 8.01 8.01 0 010 8.738 8.033 8.033 0 01-2.334 2.334 8.01 8.01 0 01-8.738 0 8.032 8.032 0 01-2.334-2.334 8.01 8.01 0 010-8.738A8.03 8.03 0 015.63 3.297zm5.198 4.882a2.008 2.008 0 00-2.243.407 1.994 1.994 0 00-.407 2.243 1.993 1.993 0 00.992.992 2.008 2.008 0 002.243-.407c.176-.175.31-.374.407-.585a2.008 2.008 0 00-.407-2.243 1.993 1.993 0 00-.585-.407z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                </a>
                <!-- END Tickets Card -->

                <!-- Customers Card -->
                <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-orange-50 transition hover:bg-orange-100 active:bg-orange-50">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-orange-600">{{ $nbreleves }}</dt>
                            <dd class="text-sm font-medium text-orange-900">
                                {{ __('tables.eleves') }}
                            </dd>
                        </dl>
                        <svg class="hi-mini hi-user-group inline-block h-10 w-10 text-orange-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path
                                d="M10 9a3 3 0 100-6 3 3 0 000 6zM6 8a2 2 0 11-4 0 2 2 0 014 0zM1.49 15.326a.78.78 0 01-.358-.442 3 3 0 014.308-3.516 6.484 6.484 0 00-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 01-2.07-.655zM16.44 15.98a4.97 4.97 0 002.07-.654.78.78 0 00.357-.442 3 3 0 00-4.308-3.517 6.484 6.484 0 011.907 3.96 2.32 2.32 0 01-.026.654zM18 8a2 2 0 11-4 0 2 2 0 014 0zM5.304 16.19a.844.844 0 01-.277-.71 5 5 0 019.947 0 .843.843 0 01-.277.71A6.975 6.975 0 0110 18a6.974 6.974 0 01-4.696-1.81z" />
                        </svg>
                    </div>
                </a>
                <!-- END Customers Card -->

                <!-- Sales Card -->
                {{-- <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-emerald-50 transition hover:bg-emerald-100 active:bg-emerald-50 xl:col-span-2">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-emerald-600">256</dt>
                            <dd class="text-sm font-medium text-emerald-900">
                                Sales in the last 10 days
                            </dd>
                        </dl>
                        <svg class="hi-mini hi-chart-pie inline-block h-10 w-10 text-emerald-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path
                                d="M12 9a1 1 0 01-1-1V3c0-.553.45-1.008.997-.93a7.004 7.004 0 015.933 5.933c.078.547-.378.997-.93.997h-5z" />
                            <path
                                d="M8.003 4.07C8.55 3.992 9 4.447 9 5v5a1 1 0 001 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 012 11a7.002 7.002 0 016.003-6.93z" />
                        </svg>
                    </div>
                    <div>
                        <svg class="w-auto text-emerald-200" fill="currentColor" viewBox="0 0 1000 500"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M 0 493.9109719606716 C 14.200000000000001 490.40802978683513 42.60000000000001 487.5791262811064 71 476.39626109148924 C 99.4 465.21339590187205 113.6 453.15974467495977 142 437.99664601258576 C 170.4 422.8335473502118 184.6 406.98651600999744 213 400.58076777961935 C 241.4 394.17501954924126 255.6 416.4756240849917 284 405.9679048606953 C 312.4 395.46018563639893 326.6 358.32287941899733 355 348.0421716581375 C 383.4 337.7614638972776 397.6 368.4679124832968 426 354.5643660563959 C 454.4 340.660819629495 468.6 300.30672545627453 497 278.5244395236329 C 525.4 256.7421535909913 539.6 252.0730672209553 568 245.65293639318784 C 596.4 239.23280556542042 610.6 231.89211788080013 639 246.42378538479574 C 667.4 260.95545288879134 681.6 336.33567203932097 710 318.3112739131659 C 738.4 300.28687578701084 752.6 166.6854990107404 781 156.30179475402042 C 809.4 145.91809049730045 823.6 289.85843160308036 852 266.3927526295661 C 880.4 242.92707365605182 894.6 59.99402379966443 923 38.9733998864491 C 951.4 17.952775973233773 979.8 136.82638642808135 994 161.28963306348942 L 1000 500 L 0 500Z"
                                fill="currentColor"></path>
                        </svg>
                    </div>
                </a> --}}
                <!-- END Sales Card -->

                <!-- Tickets Card -->
                {{-- <a href="javascript:void(0)"
                    class="group flex flex-col overflow-hidden rounded-2xl bg-rose-50 transition hover:bg-rose-100 active:bg-rose-50 xl:col-span-2">
                    <div class="flex grow items-center justify-between p-6">
                        <dl>
                            <dt class="text-2xl font-bold text-rose-600">32</dt>
                            <dd class="text-sm font-medium text-rose-900">
                                Tickets in the last 10 days
                            </dd>
                        </dl>
                        <svg class="hi-mini hi-lifebuoy inline-block h-10 w-10 text-rose-300"
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M7.171 4.146l1.947 2.466a3.514 3.514 0 011.764 0l1.947-2.466a6.52 6.52 0 00-5.658 0zm8.683 3.025l-2.466 1.947c.15.578.15 1.186 0 1.764l2.466 1.947a6.52 6.52 0 000-5.658zm-3.025 8.683l-1.947-2.466c-.578.15-1.186.15-1.764 0l-1.947 2.466a6.52 6.52 0 005.658 0zM4.146 12.83l2.466-1.947a3.514 3.514 0 010-1.764L4.146 7.171a6.52 6.52 0 000 5.658zM5.63 3.297a8.01 8.01 0 018.738 0 8.031 8.031 0 012.334 2.334 8.01 8.01 0 010 8.738 8.033 8.033 0 01-2.334 2.334 8.01 8.01 0 01-8.738 0 8.032 8.032 0 01-2.334-2.334 8.01 8.01 0 010-8.738A8.03 8.03 0 015.63 3.297zm5.198 4.882a2.008 2.008 0 00-2.243.407 1.994 1.994 0 00-.407 2.243 1.993 1.993 0 00.992.992 2.008 2.008 0 002.243-.407c.176-.175.31-.374.407-.585a2.008 2.008 0 00-.407-2.243 1.993 1.993 0 00-.585-.407z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div>
                        <svg class="w-auto text-rose-200" fill="currentColor" viewBox="0 0 1000 500"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M 0 491.97664735392186 C 14.2 487.6342321000262 42.599999999999994 479.4664419168693 71 470.26457108444356 C 99.4 461.0627002520178 113.6 460.88088046251244 142 445.967293191793 C 170.4 431.0537059210735 184.6 401.92769317557264 213 395.6966347308462 C 241.4 389.46557628611976 255.6 425.8825606617139 284 414.8120009681609 C 312.4 403.74144127460784 326.6 363.99447099184636 355 340.343836263081 C 383.4 316.6932015343157 397.6 303.4354664839433 426 296.5588273243342 C 454.4 289.68218816472506 468.6 313.94896637638396 497 305.96064046503545 C 525.4 297.97231455368694 539.6 258.86629470075934 568 256.61719776759156 C 596.4 254.36810083442379 610.6 314.6658746403039 639 294.7151557991966 C 667.4 274.76443695808933 681.6 173.183035720006 710 156.863603562055 C 738.4 140.54417140410402 752.6 214.65802978224644 781 213.11799500944176 C 809.4 211.57796023663707 823.6 150.70388385188858 852 149.16342969803156 C 880.4 147.62297554417455 894.6 213.57548048920893 923 205.4157242401567 C 951.4 197.25596799110446 979.8 127.77486361024759 994 108.36464845277033 L 1000 500 L 0 500Z">
                            </path>
                        </svg>
                    </div>
                </a> --}}
                <!-- END Tickets Card -->
            </div>
        </div>
        <!-- END Quick Stats -->

        <!-- Leads -->
        <div>
            <h2 class="mb-1 text-2xl font-semibold">{{ __('sidebar.messages') }}</h2>
            <h3 class="mb-8 text-sm font-medium text-slate-600">
                {{ __('tables.slogan') }}
            </h3>
            <!-- Responsive Table Container -->
            <div class="min-w-full overflow-x-auto rounded">
                <!-- Alternate Responsive Table -->
                <table class="min-w-full align-middle text-sm">
                    <!-- Table Header -->
                    <thead>
                        <tr class="border-b-2 border-slate-100">
                            <th
                                class="min-w-[180px] py-3 pe-3 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                {{ __('tables.objet') }}
                            </th>
                            <th
                                class="min-w-[180px] px-3 py-2 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                {{ __('tables.eleves') }}
                            </th>
                            <th
                                class="min-w-[180px] px-3 py-2 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                {{ __('tables.date_envoie') }}
                            </th>
                            <th
                                class="px-3 py-2 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                {{ __('tables.statut') }}
                            </th>
                            {{-- <th
                                class="px-3 py-2 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                Contact
                            </th>
                            <th
                                class="min-w-[180px] py-2 ps-3 text-start text-sm font-semibold uppercase tracking-wider text-slate-700">
                                Actions
                            </th> --}}
                        </tr>
                    </thead>
                    <!-- END Table Header -->

                    <!-- Table Body -->
                    <tbody>
                        @php
                            // Trier le tableau
                            $sortedData = collect($allData)
                                ->sortByDesc('ticket_created_date')
                                ->take(5)
                                ->values()
                                ->all();
                        @endphp
                        @foreach ($sortedData as $index => $item)
                            <tr class="border-b border-gray-100" wire:key='data-{{ $item['ticket_id'] }}'>
                                <td class="py-3 pe-3 text-start">
                                    <a href="javascript:void(0)"
                                        class="font-medium text-indigo-500 hover:text-indigo-700">{{ $item['ticket_type_designation'] }}</a>
                                </td>
                                <td class="p-3 text-slate-600">{{ $item['eleve'] }}</td>
                                <td class="p-3 font-medium">
                                    {{ date('d/m/Y', strtotime($item['ticket_created_date'])) }}
                                </td>
                                <td class="p-3 text-start">
                                    @if ($item['is_opened_by_admin'] == 1)
                                        <div
                                            class="inline-block rounded-full bg-emerald-100 px-2 py-1 text-xs font-semibold leading-4 text-emerald-800">
                                            {{ __('tables.lu') }}
                                        </div>
                                    @else
                                        <div
                                            class="inline-block rounded-full bg-purple-100 px-2 py-1 text-xs font-semibold leading-4 text-purple-800">
                                            {{ __('tables.nonlu') }}
                                        </div>
                                    @endif

                                </td>
                                {{-- <td class="p-3 font-medium">john.smith@acmeinc.com</td> --}}
                                {{-- <td class="py-3 ps-3 font-medium">
                                    <a href="javascript:void(0)"
                                        class="group inline-flex items-center gap-1 rounded-xl border border-slate-200 px-2.5 py-1.5 font-medium text-slate-800 transition duration-75 hover:border-indigo-300 hover:text-indigo-800 active:border-slate-200">
                                        <span>Send Message</span>
                                        <svg class="hi-mini hi-arrow-right inline-block h-5 w-5 text-slate-400 transition duration-75 group-hover:text-indigo-600 group-active:translate-x-0.5"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                            aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </a>
                                </td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                    <!-- END Table Body -->
                </table>
                <!-- END Alternate Responsive Table -->
            </div>
            <!-- END Responsive Table Container -->
        </div>
        <!-- END Leads -->

        <!-- Resources -->
        {{-- <div>
            <h2 class="mb-1 text-2xl font-semibold">Resources</h2>
            <h3 class="mb-8 text-sm font-medium text-slate-600">
                Helpful links to make your job easier
            </h3>
            <div class="grid grid-cols-1 gap-16 xl:grid-cols-3">
                <!-- Documentation -->
                <div>
                    <h4 class="mb-0.5 font-semibold">Documentation</h4>
                    <h5 class="text-sm text-gray-600">Most popular articles</h5>
                    <ul class="divide-y divide-dashed pt-3">
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Getting Started</span>
                                <svg class="hi-mini hi-document-text inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Sending Messages</span>
                                <svg class="hi-mini hi-document-text inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Finding new leads</span>
                                <svg class="hi-mini hi-document-text inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Closing a deal</span>
                                <svg class="hi-mini hi-document-text inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- END Documentation -->

                <!-- Assets -->
                <div>
                    <h4 class="mb-0.5 font-semibold">Assets</h4>
                    <h5 class="text-sm text-gray-600">
                        Everything you might need
                    </h5>
                    <ul class="divide-y divide-dashed pt-3">
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>AI Prompts</span>
                                <svg class="hi-mini hi-briefcase inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
                                        clip-rule="evenodd" />
                                    <path
                                        d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Graphics</span>
                                <svg class="hi-mini hi-briefcase inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
                                        clip-rule="evenodd" />
                                    <path
                                        d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Videos</span>
                                <svg class="hi-mini hi-briefcase inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
                                        clip-rule="evenodd" />
                                    <path
                                        d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Icons</span>
                                <svg class="hi-mini hi-briefcase inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
                                        clip-rule="evenodd" />
                                    <path
                                        d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- END Assets -->

                <!-- External Links -->
                <div>
                    <h4 class="mb-0.5 font-semibold">External Links</h4>
                    <h5 class="text-sm text-gray-600">Services we use</h5>
                    <ul class="divide-y divide-dashed pt-3">
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Analytics</span>
                                <svg class="hi-mini hi-arrow-top-right-on-square inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
                                        clip-rule="evenodd" />
                                    <path fill-rule="evenodd"
                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Google Docs</span>
                                <svg class="hi-mini hi-arrow-top-right-on-square inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
                                        clip-rule="evenodd" />
                                    <path fill-rule="evenodd"
                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Discord</span>
                                <svg class="hi-mini hi-arrow-top-right-on-square inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
                                        clip-rule="evenodd" />
                                    <path fill-rule="evenodd"
                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"
                                class="group flex items-center justify-between py-2 text-sm font-medium text-indigo-500 hover:text-indigo-700">
                                <span>Tailkit</span>
                                <svg class="hi-mini hi-arrow-top-right-on-square inline-block h-5 w-5 text-slate-400 group-hover:text-indigo-600"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
                                        clip-rule="evenodd" />
                                    <path fill-rule="evenodd"
                                        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
                                        clip-rule="evenodd" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- END External Links -->
            </div>
        </div> --}}
        <!-- END Resources -->
    </div>
    <!-- END Page Section -->
</main>
<!-- END Page Content -->