Full-Page Search Overlay

<div>
  <button type="button" aria-haspopup="dialog" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-600 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-300 dark:focus-visible:ring-blue-400">
    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m14 14 3 3" stroke-linecap="round" /></svg>
    Search
  </button>

  <!-- Full-viewport overlay. The close button is a real control, and Escape
       also dismisses it in the React/TS tab. Shown open. -->
  <div class="fixed inset-0 z-50 bg-white/95 p-4 backdrop-blur dark:bg-gray-950/95" role="dialog" aria-modal="true" aria-label="Search">
    <div class="mx-auto flex max-w-2xl items-center gap-3 pt-4">
      <svg class="h-6 w-6 flex-none text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m14 14 3 3" stroke-linecap="round" /></svg>
      <label class="sr-only" for="overlay-input">Search</label>
      <input id="overlay-input" type="text" placeholder="Type to search…" autocomplete="off" class="w-full border-0 bg-transparent py-2 text-lg text-gray-900 placeholder:text-gray-400 focus:outline-none dark:text-gray-100" />
      <button type="button" aria-label="Close search" class="rounded-md p-2 text-gray-500 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15" stroke-linecap="round" /></svg></button>
    </div>
    <ul class="mx-auto mt-6 max-w-2xl space-y-1">
      <li class="rounded-lg px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800">Getting started guide</li>
    </ul>
  </div>
</div>