404 With Search Box

<!--
  A native GET form, no JS: the label is sr-only (a placeholder is not a name in
  the a11y tree), the leading magnifier is decorative, and the row stacks below
  sm so the field never collapses to an unusable width on a phone.
-->
<section class="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-16 text-center sm:py-24">
  <p class="text-sm font-semibold uppercase tracking-widest text-blue-600 dark:text-blue-400">Error 404</p>
  <h1 class="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    Page not found
  </h1>
  <p class="mt-3 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
    We couldn't find that page. Try searching for what you need.
  </p>
  <form action="/search" method="get" role="search" class="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row">
    <label for="error-search" class="sr-only">Search the site</label>
    <div class="relative min-w-0 flex-1">
      <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400 dark:text-gray-500" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
      </span>
      <input id="error-search" name="q" type="search" placeholder="Search the site…" class="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
    </div>
    <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      Search
    </button>
  </form>
  <a href="/" class="mt-6 text-sm font-medium text-blue-600 underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
    Or go back home
  </a>
</section>