tables

              <div class="flow-root">
  <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
      <!-- copy:start -->
      <table class="min-w-full">
        <thead class="border-b border-zinc-200">
          <tr>
            <th
              scope="col"
              class="py-3.5 pl-4 pr-3 text-base font-medium tracking-tighter text-zinc-900 text-left"
            >
              Name
            </th>
            <th
              scope="col"
              class="px-3 py-3.5 text-base font-medium tracking-tighter text-zinc-900 text-left"
            >
              Title
            </th>
            <th
              scope="col"
              class="px-3 py-3.5 text-base font-medium tracking-tighter text-zinc-900 text-left"
            >
              Email
            </th>
            <th
              scope="col"
              class="px-3 py-3.5 text-base font-medium tracking-tighter text-zinc-900 text-left"
            >
              Role
            </th>
            <th scope="col" class="relative py-3.5 pl-3 pr-3">
              <span class="sr-only">Edit</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="even:bg-zinc-50">
            <td
              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium tracking-tighter text-zinc-900"
            >
              Jhonny Begood
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Design Engineer
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              email@example.com
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Member
            </td>
            <td class="relative whitespace-nowrap py-4 pr-3 text-right">
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-blue-500 bg-transparent hover:underline focus:underline focus:outline-none p-0 rounded-none h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md ml-auto"
                type="submit"
              >
                Edit<span class="sr-only">Edit</span>
              </button>
            </td>
          </tr>
          <tr class="even:bg-zinc-50 rounded-lg">
            <td
              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium tracking-tighter text-zinc-900 rounded-l-lg"
            >
              Alice Smith
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Product Manager
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              alice@example.com
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Admin
            </td>
            <td
              class="relative whitespace-nowrap py-4 pr-3 text-right rounded-r-lg"
            >
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-blue-500 bg-transparent hover:underline focus:underline focus:outline-none p-0 rounded-none h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md ml-auto"
                type="submit"
              >
                Edit<span class="sr-only">Edit</span>
              </button>
            </td>
          </tr>
          <tr class="even:bg-zinc-50">
            <td
              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium tracking-tighter text-zinc-900"
            >
              Bob Johnson
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Frontend Developer
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              bob@example.com
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Member
            </td>
            <td class="relative whitespace-nowrap py-4 pr-3 text-right">
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-blue-500 bg-transparent hover:underline focus:underline focus:outline-none p-0 rounded-none h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md ml-auto"
                type="submit"
              >
                Edit<span class="sr-only">Edit</span>
              </button>
            </td>
          </tr>
          <tr class="even:bg-zinc-50 rounded-lg">
            <td
              class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium tracking-tighter text-zinc-900 rounded-l-lg"
            >
              Clara Oswald
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Backend Developer
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              clara@example.com
            </td>
            <td
              class="px-3 py-4 text-xs font-medium whitespace-nowrap text-zinc-500"
            >
              Member
            </td>
            <td
              class="relative whitespace-nowrap py-4 pr-3 text-right rounded-r-lg"
            >
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-blue-500 bg-transparent hover:underline focus:underline focus:outline-none p-0 rounded-none h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md ml-auto"
                type="submit"
              >
                Edit<span class="sr-only">Edit</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>