Inline Table Filter

<div class="w-full">
  <label class="sr-only" for="table-filter">Filter rows</label>
  <input id="table-filter" type="search" placeholder="Filter rows…" autocomplete="off" class="mb-3 w-full max-w-xs rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
  <p class="mb-2 text-xs text-gray-600 dark:text-gray-300" role="status" aria-live="polite">2 of 3 rows</p>

  <!-- The wrapper scrolls sideways so the table never pushes the page wider. -->
  <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-800">
    <table class="w-full min-w-[24rem] text-left text-sm">
      <thead class="bg-gray-50 text-xs uppercase tracking-wide text-gray-500 dark:bg-gray-900 dark:text-gray-400">
        <tr><th scope="col" class="px-3 py-2 font-medium">Name</th><th scope="col" class="px-3 py-2 font-medium">Role</th></tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
        <tr class="text-gray-800 dark:text-gray-100"><td class="px-3 py-2">Ada Lovelace</td><td class="px-3 py-2">Engineer</td></tr>
        <tr class="text-gray-800 dark:text-gray-100"><td class="px-3 py-2">Grace Hopper</td><td class="px-3 py-2">Admiral</td></tr>
      </tbody>
    </table>
  </div>
</div>