Paginated Table

<!--
  The footer lives in a real <tfoot> so it belongs to the table, and its cell
  spans every column. The "Showing X-Y of Z" line is wrapped in aria-live=polite
  so the range is announced when the page changes; the Prev/Next buttons are
  disabled (not hidden) at the ends, which keeps their position stable. (Wire the
  buttons to page state in React/TS.)
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[32rem] border-collapse text-left text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Name</th>
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Ada Byron</td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">ada@ex.co</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="border-t border-gray-200 dark:border-gray-800">
        <td colspan="2" class="px-3 py-3">
          <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
            <span class="text-xs text-gray-600 dark:text-gray-400">Showing 1-5 of 23</span>
            <div class="flex items-center gap-2">
              <button type="button" disabled class="rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 disabled:opacity-40 dark:border-gray-700 dark:text-gray-300">Previous</button>
              <button type="button" class="rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Next</button>
            </div>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>