Selectable Rows Table

<!--
  Two accessibility jobs here. The header checkbox is TRI-STATE: checked when all
  rows are, indeterminate when some are - and `indeterminate` is a DOM property
  with no HTML attribute, so it must be set from JS (see React/TS). Each row
  checkbox has an aria-label naming its row, because a bare checkbox in a grid is
  otherwise announced as just "checkbox". The selected row gets a tinted bg so the
  selection is not carried by the checkmark alone.
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[34rem] border-collapse text-left text-sm">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <th scope="col" class="w-10 px-3 py-2.5">
          <input type="checkbox" aria-label="Select all rows" class="h-4 w-4 accent-blue-600 dark:accent-blue-500" />
        </th>
        <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">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 bg-blue-50/60 dark:border-gray-800 dark:bg-blue-500/10">
        <td class="px-3 py-2.5"><input type="checkbox" checked aria-label="Select Dana Lee" class="h-4 w-4 accent-blue-600 dark:accent-blue-500" /></td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Dana Lee</td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Admin</td>
      </tr>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5"><input type="checkbox" aria-label="Select Sam Ford" class="h-4 w-4 accent-blue-600 dark:accent-blue-500" /></td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Sam Ford</td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Editor</td>
      </tr>
    </tbody>
  </table>
</div>