Table

<div class="space-y-2xlSpace">
    <div class="space-y-mdSpace">
        <span class="inline-block text-xs text-tertiary-500">Showing 1 to 50 of 100</span>

        <div class="-mx-4 overflow-hidden sm:-mx-6 md:mx-0 md:rounded-lg">
            <table class="min-w-full">
                <thead class="bg-tertiary-100">
                    <tr>
                        <th scope="col" class="py-smSpace pl-mdSpace pr-3 text-left text-sm font-medium text-tertiary-700 sm:pl-lgSpace"></th>
                        <th scope="col" class="py-smSpace pl-mdSpace pr-3 text-left text-sm font-medium text-tertiary-700 sm:pl-lgSpace max-lg:hidden">Name</th>
                        <th scope="col" class="px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 table-cell">Title</th>
                        <th scope="col" class="hidden px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 lg:table-cell max-lg:hidden">Email</th>
                        <th scope="col" class="hidden px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 sm:table-cell max-lg:hidden">Role</th>
                        <th scope="col" class="px-3 py-smSpace text-left text-sm font-medium text-tertiary-700 table-cell">Status</th>
                        <th scope="col" class="relative py-smSpace pl-3 pr-mdSpace sm:pr-lgSpace">
                            <span class="sr-only">Edit</span>
                        </th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-tertiary-200 bg-white">
                    <tr class="align-top lg:align-middle">
                        <td class="whitespace-nowrap py-4 pl-mdSpace pr-3 text-sm font-medium text-tertiary-900 sm:pl-lgSpace">
                            <label class="flex items-center">
                                <label class="flex items-center space-x-xsSpace">
                                    <input type="checkbox" class="wrapper__checkbox">

                                    <span class="text-tertiary-700 text-xs"></span>
                                </label>
                            </label>
                        </td>

                        <td class="w-full max-w-0 py-4 pl-mdSpace pr-3 text-sm font-medium text-tertiary-900 sm:w-auto sm:max-w-none sm:pl-lgSpace">
                            <div class="flex items-start lg:items-center space-x-smSpace">
                                <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                                <div>
                                    <span>Lindsay Walton</span>

                                    <dl class="font-normal lg:hidden">
                                        <dt class="sr-only">Title</dt>
                                        <dd class="mt-1 truncate text-tertiary-700">Front-end Developer</dd>
                                        <dt class="sr-only lg:hidden">Email</dt>
                                        <dd class="mt-1 truncate text-tertiary-500 lg:hidden">[email protected]</dd>
                                        <dt class="sr-only lg:hidden">Role</dt>
                                        <dd class="mt-1 truncate text-tertiary-500 lg:hidden">Member</dd>
                                        <dt class="sr-only lg:hidden">Status</dt>
                                        <dd class="mt-1 truncate text-tertiary-500 sm:hidden"><span class="inline-flex items-center rounded-full bg-success-100 text-success-700 font-medium text-xs px-smSpace py-2xsSpace">
                                                Active
                                            </span></dd>
                                    </dl>
                                </div>
                            </div>
                        </td>

                        <td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">Front-end Developer</td>

                        <td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">[email protected]</td>

                        <td class="hidden px-3 py-4 text-sm text-tertiary-500 lg:table-cell">Member</td>

                        <td class="hidden whitespace-nowrap px-3 py-4 text-sm text-tertiary-500 sm:table-cell">
                            <span class="inline-flex items-center rounded-full bg-success-100 text-success-700 font-medium text-xs px-smSpace py-2xsSpace">
                                Active
                            </span>
                        </td>

                        <td class="relative whitespace-nowrap py-4 pl-3 pr-mdSpace text-right text-sm font-medium sm:pr-lgSpace">
                            <div class="flex items-center">
                                <a href="#" class="w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer fill-current text-tertiary-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                        <path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" />
                                        <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" />
                                    </svg>
                                </a>

                                <a href="#" class="relative -ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer fill-current text-tertiary-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
                                    </svg>

                                </a>

                                <a href="#" class="relative -ml-1 w-xlSpace h-xlSpace flex items-center justify-center hover:bg-tertiary-100 rounded-lg cursor-pointer fill-current text-tertiary-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                                        <path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
                                    </svg>
                                </a>
                            </div>
                        </td>
                    </tr>

                    <!-- More people... -->
                </tbody>
            </table>
        </div>
    </div>
</div>