Scoped Search Tabs

<div class="mx-auto w-full max-w-md">
  <label class="sr-only" for="scope-search">Search</label>
  <input id="scope-search" type="search" placeholder="Search…" autocomplete="off" class="w-full 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" />

  <!-- Scopes narrow the same result set. Segmented buttons, aria-pressed state. -->
  <div class="mt-3 inline-flex rounded-lg border border-gray-200 p-0.5 dark:border-gray-800" role="group" aria-label="Search scope">
    <button type="button" aria-pressed="true" class="rounded-md bg-blue-600 px-3 py-1 text-xs font-medium text-white">All</button>
    <button type="button" aria-pressed="false" class="rounded-md px-3 py-1 text-xs font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Docs</button>
    <button type="button" aria-pressed="false" class="rounded-md px-3 py-1 text-xs font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">People</button>
  </div>

  <p class="mt-3 text-xs text-gray-600 dark:text-gray-300" role="status" aria-live="polite">4 results</p>
  <ul class="mt-1 divide-y divide-gray-200 dark:divide-gray-800">
    <li class="py-2.5 text-sm text-gray-900 dark:text-gray-100">Getting started</li>
  </ul>
</div>