Table: Simple

<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>