<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 p-4 gap-4">
    <div
        class="bg-blue-500  shadow-lg rounded-md flex items-center justify-between p-3 border-b-4 border-blue-600  text-white font-medium group">
        <div
            class="flex justify-center items-center w-14 h-14 bg-white rounded-full transition-all duration-300 transform group-hover:rotate-12">
            <svg width="30" height="30" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                class="stroke-current text-blue-800  transform transition-transform duration-500 ease-in-out">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
                </path>
            </svg>
        </div>
        <div class="text-right">
            <p class="text-2xl">1,257</p>
            <p>Visitors</p>
        </div>
    </div>
    <div
        class="bg-blue-500  shadow-lg rounded-md flex items-center justify-between p-3 border-b-4 border-blue-600  text-white font-medium group">
        <div
            class="flex justify-center items-center w-14 h-14 bg-white rounded-full transition-all duration-300 transform group-hover:rotate-12">
            <svg width="30" height="30" fill="none" viewBox="0 0 24 24"
                stroke="currentColor"
                class="stroke-current text-blue-800  transform transition-transform duration-500 ease-in-out">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
            </svg>
        </div>
        <div class="text-right">
            <p class="text-2xl">557</p>
            <p>Orders</p>
        </div>
    </div>
    <div
        class="bg-blue-500  shadow-lg rounded-md flex items-center justify-between p-3 border-b-4 border-blue-600  text-white font-medium group">
        <div
            class="flex justify-center items-center w-14 h-14 bg-white rounded-full transition-all duration-300 transform group-hover:rotate-12">
            <svg width="30" height="30" fill="none" viewBox="0 0 24 24"
                stroke="currentColor"
                class="stroke-current text-blue-800  transform transition-transform duration-500 ease-in-out">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
        </div>
        <div class="text-right">
            <p class="text-2xl">$11,257</p>
            <p>Sales</p>
        </div>
    </div>
    <div
        class="bg-blue-500  shadow-lg rounded-md flex items-center justify-between p-3 border-b-4 border-blue-600  text-white font-medium group">
        <div
            class="flex justify-center items-center w-14 h-14 bg-white rounded-full transition-all duration-300 transform group-hover:rotate-12">
            <svg width="30" height="30" fill="none" viewBox="0 0 24 24"
                stroke="currentColor"
                class="stroke-current text-blue-800  transform transition-transform duration-500 ease-in-out">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                </path>
            </svg>
        </div>
        <div class="text-right">
            <p class="text-2xl">$75,257</p>
            <p>Balances</p>
        </div>
    </div>
</div>
<!-- ./Statistics Cards -->

<div class="grid grid-cols-1 lg:grid-cols-2 p-4 gap-4">

    <!-- Social Traffic -->
    <div
        class="relative flex flex-col min-w-0 mb-4 lg:mb-0 break-words bg-gray-50  w-full shadow-lg rounded">
        <div class="rounded-t mb-0 px-0 border-0">
            <div class="flex flex-wrap items-center px-4 py-2">
                <div class="relative w-full max-w-full flex-grow flex-1">
                    <h3 class="font-semibold text-base text-gray-900 ">Social Traffic
                    </h3>
                </div>
                <div class="relative w-full max-w-full flex-grow flex-1 text-right">
                    <button
                        class="bg-blue-500  text-white active:bg-blue-600   text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                        type="button">See all</button>
                </div>
            </div>
            <div class="block w-full overflow-x-auto">
                <table class="items-center w-full bg-transparent border-collapse">
                    <thead>
                        <tr>
                            <th
                                class="px-4 bg-gray-100  text-gray-500  align-middle border border-solid border-gray-200  py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                                Referral</th>
                            <th
                                class="px-4 bg-gray-100  text-gray-500  align-middle border border-solid border-gray-200  py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                                Visitors</th>
                            <th
                                class="px-4 bg-gray-100  text-gray-500  align-middle border border-solid border-gray-200  py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-gray-700 ">
                            <th
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                                Facebook</th>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                5,480</td>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                <div class="flex items-center">
                                    <span class="mr-2">70%</span>
                                    <div class="relative w-full">
                                        <div
                                            class="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
                                            <div style="width: 70%"
                                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-gray-700 ">
                            <th
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                                Twitter</th>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                3,380</td>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                <div class="flex items-center">
                                    <span class="mr-2">40%</span>
                                    <div class="relative w-full">
                                        <div
                                            class="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
                                            <div style="width: 40%"
                                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-gray-700 ">
                            <th
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                                Instagram</th>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                4,105</td>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                <div class="flex items-center">
                                    <span class="mr-2">45%</span>
                                    <div class="relative w-full">
                                        <div
                                            class="overflow-hidden h-2 text-xs flex rounded bg-pink-200">
                                            <div style="width: 45%"
                                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-gray-700 ">
                            <th
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                                Google</th>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                4,985</td>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                <div class="flex items-center">
                                    <span class="mr-2">60%</span>
                                    <div class="relative w-full">
                                        <div
                                            class="overflow-hidden h-2 text-xs flex rounded bg-red-200">
                                            <div style="width: 60%"
                                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="text-gray-700 ">
                            <th
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">
                                Linkedin</th>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                2,250</td>
                            <td
                                class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
                                <div class="flex items-center">
                                    <span class="mr-2">30%</span>
                                    <div class="relative w-full">
                                        <div
                                            class="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
                                            <div style="width: 30%"
                                                class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-700">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- ./Social Traffic -->

    <!-- Recent Activities -->
    <div class="relative flex flex-col min-w-0 break-words bg-gray-50  w-full shadow-lg rounded">
        <div class="rounded-t mb-0 px-0 border-0">
            <div class="flex flex-wrap items-center px-4 py-2">
                <div class="relative w-full max-w-full flex-grow flex-1">
                    <h3 class="font-semibold text-base text-gray-900 ">Recent
                        Activities</h3>
                </div>
                <div class="relative w-full max-w-full flex-grow flex-1 text-right">
                    <button
                        class="bg-blue-500  text-white active:bg-blue-600   text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                        type="button">See all</button>
                </div>
            </div>
            <div class="block w-full">
                <div
                    class="px-4 bg-gray-100  text-gray-500  align-middle border border-solid border-gray-200  py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                    Today
                </div>
                <ul class="my-1">
                    <li class="flex px-4">
                        <div class="w-9 h-9 rounded-full flex-shrink-0 bg-indigo-500 my-2 mr-3">
                            <svg class="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                                <path
                                    d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z">
                                </path>
                            </svg>
                        </div>
                        <div
                            class="flex-grow flex items-center border-b border-gray-100  text-sm text-gray-600  py-2">
                            <div class="flex-grow flex justify-between items-center">
                                <div class="self-center">
                                    <a class="font-medium text-gray-800 hover:text-gray-900  "
                                        href="#0" style="outline: none;">Nick Mark</a> mentioned
                                    <a class="font-medium text-gray-800  " href="#0"
                                        style="outline: none;">Sara Smith</a> in a new
                                    post
                                </div>
                                <div class="flex-shrink-0 ml-2">
                                    <a class="flex items-center font-medium text-blue-500 hover:text-blue-600  "
                                        href="#0" style="outline: none;">
                                        View<span><svg width="20" height="20"
                                                viewBox="0 0 20 20" fill="currentColor"
                                                class="transform transition-transform duration-500 ease-in-out">
                                                <path fill-rule="evenodd"
                                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                    clip-rule="evenodd"></path>
                                            </svg></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="flex px-4">
                        <div class="w-9 h-9 rounded-full flex-shrink-0 bg-red-500 my-2 mr-3">
                            <svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
                                <path
                                    d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z">
                                </path>
                            </svg>
                        </div>
                        <div
                            class="flex-grow flex items-center border-gray-100 text-sm text-gray-600  py-2">
                            <div class="flex-grow flex justify-between items-center">
                                <div class="self-center">
                                    The post <a class="font-medium text-gray-800  " href="#0"
                                        style="outline: none;">Post Name</a> was
                                    removed by <a
                                        class="font-medium text-gray-800 hover:text-gray-900  "
                                        href="#0" style="outline: none;">Nick Mark</a>
                                </div>
                                <div class="flex-shrink-0 ml-2">
                                    <a class="flex items-center font-medium text-blue-500 hover:text-blue-600  "
                                        href="#0" style="outline: none;">
                                        View<span><svg width="20" height="20"
                                                viewBox="0 0 20 20" fill="currentColor"
                                                class="transform transition-transform duration-500 ease-in-out">
                                                <path fill-rule="evenodd"
                                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                    clip-rule="evenodd"></path>
                                            </svg></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div
                    class="px-4 bg-gray-100  text-gray-500  align-middle border border-solid border-gray-200  py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
                    Yesterday
                </div>
                <ul class="my-1">
                    <li class="flex px-4">
                        <div class="w-9 h-9 rounded-full flex-shrink-0 bg-green-500 my-2 mr-3">
                            <svg class="w-9 h-9 fill-current text-light-blue-50" viewBox="0 0 36 36">
                                <path
                                    d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z">
                                </path>
                            </svg>
                        </div>
                        <div
                            class="flex-grow flex items-center border-gray-100 text-sm text-gray-600  py-2">
                            <div class="flex-grow flex justify-between items-center">
                                <div class="self-center">
                                    <a class="font-medium text-gray-800 hover:text-gray-900  "
                                        href="#0" style="outline: none;">240+</a> users have
                                    subscribed to <a class="font-medium text-gray-800  "
                                        href="#0" style="outline: none;">Newsletter #1</a>
                                </div>
                                <div class="flex-shrink-0 ml-2">
                                    <a class="flex items-center font-medium text-blue-500 hover:text-blue-600  "
                                        href="#0" style="outline: none;">
                                        View<span><svg width="20" height="20"
                                                viewBox="0 0 20 20" fill="currentColor"
                                                class="transform transition-transform duration-500 ease-in-out">
                                                <path fill-rule="evenodd"
                                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                    clip-rule="evenodd"></path>
                                            </svg></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ./Recent Activities -->
</div>

<!-- Task Summaries -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 p-4 gap-4 text-black ">
    <div class="md:col-span-2 xl:col-span-3">
        <h3 class="text-lg font-semibold">Task summaries of recent sprints</h3>
    </div>
    <div class="md:col-span-2 xl:col-span-1">
        <div class="rounded bg-gray-200  p-3">
            <div class="flex justify-between py-1 text-black ">
                <h3 class="text-sm font-semibold">Tasks in TO DO</h3>
                <svg class="h-4 fill-current text-gray-600 0 cursor-pointer"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
                </svg>
            </div>
            <div class="text-sm text-black  mt-2">
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Delete all references from the wiki</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Remove analytics code</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Do a mobile first layout
                    <div class="text-gray-500  mt-2 ml-2 flex justify-between items-start">
                        <span class="text-xs flex items-center">
                            <svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 50 50">
                                <path
                                    d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
                            </svg>
                            3/5
                        </span>
                        <img src="https://i.imgur.com/OZaT7jl.png" class="rounded-full" />
                    </div>
                </div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Check the meta tags</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Think more tasks for this example
                    <div class="text-gray-500  mt-2 ml-2 flex justify-between items-start">
                        <span class="text-xs flex items-center">
                            <svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 50 50">
                                <path
                                    d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
                            </svg>
                            0/3
                        </span>
                    </div>
                </div>
                <p class="mt-3 text-gray-600 ">Add a card...</p>
            </div>
        </div>
    </div>
    <div>
        <div class="rounded bg-gray-200  p-3">
            <div class="flex justify-between py-1 text-black ">
                <h3 class="text-sm font-semibold">Tasks in DEVELOPMENT</h3>
                <svg class="h-4 fill-current text-gray-600 0 cursor-pointer"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
                </svg>
            </div>
            <div class="text-sm text-black  mt-2">
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Delete all references from the wiki</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Remove analytics code</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Do a mobile first layout
                    <div class="flex justify-between items-start mt-2 ml-2 text-white text-xs">
                        <span class="bg-pink-600 rounded p-1 text-xs flex items-center">
                            <svg class="h-4 fill-current" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24">
                                <path
                                    d="M12 2c-.8 0-1.5.7-1.5 1.5v.688C7.344 4.87 5 7.62 5 11v4.5l-2 2.313V19h18v-1.188L19 15.5V11c0-3.379-2.344-6.129-5.5-6.813V3.5c0-.8-.7-1.5-1.5-1.5zm-2 18c0 1.102.898 2 2 2 1.102 0 2-.898 2-2z" />
                            </svg>
                            2
                        </span>
                    </div>
                </div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Check the meta tags</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Think more tasks for this example
                    <div class="text-gray-500 mt-2 ml-2 flex justify-between items-start">
                        <span class="text-xs flex items-center">
                            <svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 50 50">
                                <path
                                    d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
                            </svg>
                            0/3
                        </span>
                    </div>
                </div>
                <p class="mt-3 text-gray-600 ">Add a card...</p>
            </div>
        </div>
    </div>
    <div>
        <div class="rounded bg-gray-200  p-3">
            <div class="flex justify-between py-1 text-black ">
                <h3 class="text-sm font-semibold">Tasks in QA</h3>
                <svg class="h-4 fill-current text-gray-600 0 cursor-pointer"
                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
                </svg>
            </div>
            <div class="text-sm text-black  mt-2">
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Delete all references from the wiki</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Remove analytics code</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Do a mobile first layout</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Check the meta tags</div>
                <div
                    class="bg-white  hover:bg-gray-50  p-2 rounded mt-1 border-b border-gray-100  cursor-pointer">
                    Think more tasks for this example
                    <div class="text-gray-500  mt-2 ml-2 flex justify-between items-start">
                        <span class="text-xs flex items-center">
                            <svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 50 50">
                                <path
                                    d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
                            </svg>
                            0/3
                        </span>
                    </div>
                </div>
                <p class="mt-3 text-gray-600 ">Add a card...</p>
            </div>
        </div>
    </div>
</div>
<!-- ./Task Summaries -->

<!-- Client Table -->
<div class="mt-4 mx-4">
    <div class="w-full overflow-hidden rounded-lg shadow-xs">
        <div class="w-full overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr
                        class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b  bg-gray-50  ">
                        <th class="px-4 py-3">Client</th>
                        <th class="px-4 py-3">Amount</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Date</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y  ">
                    <tr class="bg-gray-50  hover:bg-gray-100  text-gray-700 ">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                    <img class="object-cover w-full h-full rounded-full"
                                        src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
                                        alt="" loading="lazy" />
                                    <div class="absolute inset-0 rounded-full shadow-inner"
                                        aria-hidden="true"></div>
                                </div>
                                <div>
                                    <p class="font-semibold">Hans Burger</p>
                                    <p class="text-xs text-gray-600 ">10x Developer
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm">$855.85</td>
                        <td class="px-4 py-3 text-xs">
                            <span
                                class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full  ">
                                Approved </span>
                        </td>
                        <td class="px-4 py-3 text-sm">15-01-2021</td>
                    </tr>
                    <tr class="bg-gray-50  hover:bg-gray-100  text-gray-700 ">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                    <img class="object-cover w-full h-full rounded-full"
                                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;facepad=3&amp;fit=facearea&amp;s=707b9c33066bf8808c934c8ab394dff6"
                                        alt="" loading="lazy" />
                                    <div class="absolute inset-0 rounded-full shadow-inner"
                                        aria-hidden="true"></div>
                                </div>
                                <div>
                                    <p class="font-semibold">Jolina Angelie</p>
                                    <p class="text-xs text-gray-600 ">Unemployed</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm">$369.75</td>
                        <td class="px-4 py-3 text-xs">
                            <span
                                class="px-2 py-1 font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full">
                                Pending </span>
                        </td>
                        <td class="px-4 py-3 text-sm">23-03-2021</td>
                    </tr>
                    <tr class="bg-gray-50  hover:bg-gray-100  text-gray-700 ">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                    <img class="object-cover w-full h-full rounded-full"
                                        src="https://images.unsplash.com/photo-1502720705749-871143f0e671?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;fit=max&amp;s=b8377ca9f985d80264279f277f3a67f5"
                                        alt="" loading="lazy" />
                                    <div class="absolute inset-0 rounded-full shadow-inner"
                                        aria-hidden="true"></div>
                                </div>
                                <div>
                                    <p class="font-semibold">Dave Li</p>
                                    <p class="text-xs text-gray-600 ">Influencer</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm">$775.45</td>
                        <td class="px-4 py-3 text-xs">
                            <span
                                class="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full  ">
                                Expired </span>
                        </td>
                        <td class="px-4 py-3 text-sm">09-02-2021</td>
                    </tr>
                    <tr class="bg-gray-50  hover:bg-gray-100  text-gray-700 ">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                    <img class="object-cover w-full h-full rounded-full"
                                        src="https://images.unsplash.com/photo-1551006917-3b4c078c47c9?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
                                        alt="" loading="lazy" />
                                    <div class="absolute inset-0 rounded-full shadow-inner"
                                        aria-hidden="true"></div>
                                </div>
                                <div>
                                    <p class="font-semibold">Rulia Joberts</p>
                                    <p class="text-xs text-gray-600 ">Actress</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm">$1276.75</td>
                        <td class="px-4 py-3 text-xs">
                            <span
                                class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full  ">
                                Approved </span>
                        </td>
                        <td class="px-4 py-3 text-sm">17-04-2021</td>
                    </tr>
                    <tr class="bg-gray-50  hover:bg-gray-100  text-gray-700 ">
                        <td class="px-4 py-3">
                            <div class="flex items-center text-sm">
                                <div class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
                                    <img class="object-cover w-full h-full rounded-full"
                                        src="https://images.unsplash.com/photo-1566411520896-01e7ca4726af?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=200&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE3Nzg0fQ"
                                        alt="" loading="lazy" />
                                    <div class="absolute inset-0 rounded-full shadow-inner"
                                        aria-hidden="true"></div>
                                </div>
                                <div>
                                    <p class="font-semibold">Hitney Wouston</p>
                                    <p class="text-xs text-gray-600 ">Singer</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm">$863.45</td>
                        <td class="px-4 py-3 text-xs">
                            <span
                                class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full  ">
                                Denied </span>
                        </td>
                        <td class="px-4 py-3 text-sm">11-01-2021</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div
            class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t  bg-gray-50 sm:grid-cols-9  ">
            <span class="flex items-center col-span-3"> Showing 21-30 of 100 </span>
            <span class="col-span-2"></span>
            <!-- Pagination -->
            <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
                <nav aria-label="Table navigation">
                    <ul class="inline-flex items-center">
                        <li>
                            <button
                                class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
                                aria-label="Previous">
                                <svg aria-hidden="true" class="w-4 h-4 fill-current"
                                    viewBox="0 0 20 20">
                                    <path
                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                        clip-rule="evenodd" fill-rule="evenodd"></path>
                                </svg>
                            </button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">1</button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">2</button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 text-white  transition-colors duration-150 bg-blue-600  border border-r-0 border-blue-600  rounded-md focus:outline-none focus:shadow-outline-purple">3</button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">4</button>
                        </li>
                        <li>
                            <span class="px-3 py-1">...</span>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">8</button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">9</button>
                        </li>
                        <li>
                            <button
                                class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
                                aria-label="Next">
                                <svg class="w-4 h-4 fill-current" aria-hidden="true"
                                    viewBox="0 0 20 20">
                                    <path
                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                        clip-rule="evenodd" fill-rule="evenodd"></path>
                                </svg>
                            </button>
                        </li>
                    </ul>
                </nav>
            </span>
        </div>
    </div>
</div>
