Table Components Design

<div class="max-w-7xl px-4 py-10 mx-auto">
    <div class="flex flex-col">
        <h4 class="text-2xl mb-1 font-bold">Table With Filters</h4>
        <p class="mb-6 text-gray-500 font-light">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque laboriosam corporis harum dolore.
        </p>
        <div class="mb-8 flex items-center justify-between">
            <div class="relative">
                <svg class="absolute top-1/2 left-3 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#aaa" viewBox="0 0 256 256">
                    <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
                </svg>
                <input
                    type="text"
                    name="Search"
                    placeholder="Search here.."
                    class="placeholder:text-gray-400 text-[0.875rem] placeholder:font-light min-w-[300px] max-w-[300px] outline-none font-light border border-gray-200 py-2 pl-11 pr-4 rounded-lg"
                />
            </div>
            <div class="flex items-center gap-3">
                <button aria-label="filter" class="bg-gray-100 h-9 w-9 flex items-center justify-center rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
                        <path
                            d="M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm106.18,74.58A8,8,0,0,0,144,136v58.66L112,216V136a8,8,0,0,0-2.16-5.47L40,56H216Z"
                        ></path>
                    </svg>
                </button>
                <button aria-label="download" class="bg-gray-100 h-9 w-9 flex items-center justify-center rounded-md">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
                        <path
                            d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"
                        ></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="-m-1.5 overflow-x-auto">
            <div class="p-1.5 min-w-full inline-block align-middle">
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
                    <table class="min-w-full divide-y">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="ps-6 py-4 text-start">
                                    <label for="selection" class="flex">
                                        <input type="checkbox" class="shrink-0 border-gray-300 rounded outline-none" id="selection" />
                                        <span class="sr-only">Checkbox</span>
                                    </label>
                                </th>

                                <th scope="col" class="ps-6 lg:ps-3 xl:ps-0 pe-6 py-4 text-start">
                                    <div class="flex items-center gap-x-2">
                                        <span class="text-[0.875rem] font-semibold uppercase">
                                            Name
                                        </span>
                                        <button aria-label="sorting button">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256">
                                                <path
                                                    d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
                                                ></path>
                                            </svg>
                                        </button>
                                    </div>
                                </th>

                                <th scope="col" class="px-6 py-4 text-start">
                                    <div class="flex items-center gap-x-2">
                                        <span class="text-[0.875rem] font-semibold uppercase">
                                            Position
                                        </span>
                                    </div>
                                </th>

                                <th scope="col" class="px-6 py-4 text-start">
                                    <div class="flex items-center gap-x-2">
                                        <span class="text-[0.875rem] font-semibold uppercase">
                                            Status
                                        </span>
                                    </div>
                                </th>

                                <th scope="col" class="px-6 py-4 text-start">
                                    <div class="flex items-center gap-x-2">
                                        <span class="text-[0.875rem] font-semibold uppercase">
                                            Created At
                                        </span>
                                    </div>
                                </th>

                                <th scope="col" class="px-6 py-3 text-end"></th>
                            </tr>
                        </thead>

                        <tbody class="divide-y">
                            <tr>
                                <td class="size-px whitespace-nowrap">
                                    <div class="ps-6 py-3">
                                        <label for="single-selection" class="flex">
                                            <input type="checkbox" class="shrink-0 border-gray-300 rounded outline-none" id="single-selection" />
                                            <span class="sr-only">Checkbox</span>
                                        </label>
                                    </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                    <div class="ps-6 lg:ps-3 xl:ps-0 pe-6 py-3">
                                        <div class="flex items-center gap-x-3">
                                            <img class="inline-block size-[38px] rounded-full" src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="table components design" />
                                            <div class="grow">
                                                <span class="flex text-[0.875rem] font-semibold">Jon Peter</span>
                                                <span class="flex text-sm text-gray-500">business00196@gmail.com</span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="h-px w-72 whitespace-nowrap">
                                    <div class="px-6 py-3">
                                        <span class="flex text-[0.875rem] font-semibold">Manager</span>
                                        <span class="flex text-sm text-gray-500">Product</span>
                                    </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                    <div class="px-6 py-3">
                                        <span class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium bg-emerald-100 text-teal-900 rounded-md">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="fill-teal-900" viewBox="0 0 256 256">
                                                <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path>
                                            </svg>
                                            Active
                                        </span>
                                    </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                    <div class="px-6 py-3">
                                        <span class="text-sm text-gray-500">28 Dec 2024, 12:12</span>
                                    </div>
                                </td>
                                <td class="size-px whitespace-nowrap">
                                    <div class="px-6 py-1.5 flex items-center gap-x-3">
                                        <button aria-label="delete" class="h-8 w-8 hover:bg-gray-100 flex items-center justify-center rounded-md outline-none">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#000000" viewBox="0 0 256 256">
                                                <path
                                                    d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"
                                                ></path>
                                            </svg>
                                        </button>
                                        <button aria-label="edit" class="h-8 w-8 hover:bg-gray-100 flex items-center justify-center rounded-md outline-none">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#000000" viewBox="0 0 256 256">
                                                <path
                                                    d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"
                                                ></path>
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-t border-gray-200">
                        <div class="flex gap-x-3 items-center">
                            <div class="relative">
                                <input type="checkbox" class="peer hidden" id="open-pagination" />
                                <button aria-label="page-count" class="relative inline-flex cursor-pointer items-center rounded-lg bg-white border border-gray-200 min-w-14 py-1.5 text-center px-2 text-sm font-medium outline-none">
                                    <label for="open-pagination" class="absolute left-0 block h-full w-full cursor-pointer"> </label>
                                    10
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" class="ml-2" viewBox="0 0 256 256">
                                        <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path>
                                    </svg>
                                </button>

                                <div class="absolute peer-checked:block hidden w-full rounded-md border bg-white shadow-sm bottom-full mb-1">
                                    <ul class="py-1 text-sm text-gray-700" aria-labelledby="dropdown">
                                        <li>
                                            <a href="/" class="block px-4 py-2 hover:bg-black hover:text-white text-white bg-black">10</a>
                                        </li>
                                        <li>
                                            <a href="/" class="block px-4 py-2 hover:bg-gray-100">25</a>
                                        </li>
                                        <li>
                                            <a href="/" class="block px-4 py-2 hover:bg-gray-100">50</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">Showing<span class="font-semibold text-black"> 1</span> to <span class="font-semibold text-black"> 10</span> of <span class="font-semibold text-black"> 97</span> results</p>
                        </div>

                        <div>
                            <div class="sm:hidden inline-flex gap-x-2">
                                <button aria-label="prev" type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white outline-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path d="M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"></path>
                                    </svg>
                                    Prev
                                </button>

                                <button aria-label="next" type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white outline-none">
                                    Next
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="hidden sm:inline-flex items-center gap-x-2">
                                <button aria-label="most-left" class="hover:bg-gray-200 duration-200 transition h-7 w-7 flex items-center justify-center bg-gray-100 rounded-md outline-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path d="M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z"></path>
                                    </svg>
                                </button>
                                <button aria-label="left-cta" class="hover:bg-gray-200 duration-200 transition h-7 w-7 flex items-center justify-center bg-gray-100 rounded-md outline-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path d="M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z"></path>
                                    </svg>
                                </button>
                                <button aria-label="one" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-center justify-center text-sm rounded-md outline-none">
                                    1
                                </button>
                                <button aria-label="two" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-center justify-center text-sm rounded-md outline-none">
                                    2
                                </button>
                                <button aria-label="three" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-center justify-center text-sm rounded-md outline-none">
                                    3
                                </button>
                                <button aria-label="dot" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-end justify-center text-sm rounded-md outline-none">
                                    ...
                                </button>
                                <button aria-label="eight" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-center justify-center text-sm rounded-md outline-none">
                                    8
                                </button>
                                <button aria-label="nine" class="hover:bg-gray-100 duration-200 transition h-6 w-6 flex items-center justify-center text-sm rounded-md outline-none">
                                    9
                                </button>
                                <button aria-label="right-nav" class="hover:bg-gray-200 duration-200 transition h-7 w-7 flex items-center justify-center bg-gray-100 rounded-md outline-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"></path>
                                    </svg>
                                </button>
                                <button aria-label="most-right" class="hover:bg-gray-200 duration-200 transition h-7 w-7 flex items-center justify-center bg-gray-100 rounded-md outline-none">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
                                        <path
                                            d="M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z"
                                        ></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>