Avatars & Status Table

<!--
  No <img>: the avatar is initials on a gradient derived from the name, so the
  table never ships a broken image or waits on a network round-trip. The status
  is a coloured dot PLUS a word - colour alone fails for colour-blind users, and
  the dot is aria-hidden so it is not announced twice.
-->
<div class="w-full overflow-x-auto">
  <table class="w-full min-w-[38rem] 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">Member</th>
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Role</th>
        <th scope="col" class="px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 dark:border-gray-800">
        <td class="px-3 py-2.5">
          <div class="flex items-center gap-3">
            <span aria-hidden="true" class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-xs font-semibold text-white">DL</span>
            <div class="min-w-0">
              <div class="truncate font-medium text-gray-900 dark:text-gray-100">Dana Lee</div>
              <div class="truncate text-xs text-gray-500 dark:text-gray-400">dana@acme.co</div>
            </div>
          </div>
        </td>
        <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Admin</td>
        <td class="px-3 py-2.5">
          <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
            <span aria-hidden="true" class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>Active
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>