Responsive Stacked Table

<!--
  ONE semantic <table> that changes its own display, not two markups. Below md
  every table part is set to `block`, the <thead> is visually hidden, and each
  <td> shows its column name from a data-label via
  before:content-[attr(data-label)] - so on a phone each row is a labelled card,
  not a headerless grid you have to scroll sideways. At md: the display utilities
  hand it back to the browser and it is a normal table. No horizontal scroll ever
  needed, because the grid never exists at 320px.
-->
<table class="block w-full border-collapse text-sm md:table">
  <thead class="hidden md:table-header-group">
    <tr class="border-b border-gray-200 dark:border-gray-800">
      <th scope="col" class="px-3 py-2.5 text-left font-medium text-gray-700 dark:text-gray-300">Name</th>
      <th scope="col" class="px-3 py-2.5 text-left font-medium text-gray-700 dark:text-gray-300">Role</th>
      <th scope="col" class="px-3 py-2.5 text-left font-medium text-gray-700 dark:text-gray-300">Location</th>
    </tr>
  </thead>
  <tbody class="block md:table-row-group">
    <tr class="mb-3 block rounded-lg border border-gray-200 p-3 md:mb-0 md:table-row md:border-0 md:border-b md:border-gray-100 md:p-0 dark:border-gray-800">
      <td data-label="Name" class="flex justify-between gap-4 py-1 font-medium text-gray-900 before:font-medium before:text-gray-500 before:content-[attr(data-label)] md:table-cell md:px-3 md:py-2.5 md:font-normal md:text-gray-700 md:before:content-none dark:text-gray-100 md:dark:text-gray-300">Dana Lee</td>
      <td data-label="Role" class="flex justify-between gap-4 py-1 text-gray-700 before:font-medium before:text-gray-500 before:content-[attr(data-label)] md:table-cell md:px-3 md:py-2.5 md:before:content-none dark:text-gray-300">Admin</td>
      <td data-label="Location" class="flex justify-between gap-4 py-1 text-gray-700 before:font-medium before:text-gray-500 before:content-[attr(data-label)] md:table-cell md:px-3 md:py-2.5 md:before:content-none dark:text-gray-300">Berlin</td>
    </tr>
  </tbody>
</table>