Search Hero

<section class="mx-auto w-full max-w-2xl px-4 py-12 text-center sm:py-16">
  <h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
    Find the right component in seconds
  </h1>
  <p class="mx-auto mt-4 max-w-lg text-base leading-relaxed text-gray-600 dark:text-gray-400">
    Search a growing library of accessible, responsive building blocks.
  </p>

  <form action="/search" method="get" class="mx-auto mt-7 max-w-xl" role="search">
    <label for="hero-search-input" class="sr-only">Search templates</label>
    <div class="flex flex-col gap-2 sm:flex-row">
      <div class="relative min-w-0 flex-1">
        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-400" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="h-5 w-5"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
        </span>
        <input id="hero-search-input" name="q" type="search" placeholder="Search 20,000+ templates…" class="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-11 pr-3.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
      </div>
      <button type="submit" class="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 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
        Search
      </button>
    </div>
  </form>

  <ul class="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm">
    <li class="text-gray-500 dark:text-gray-400">Popular:</li>
    <li><a href="#" class="rounded-full border border-gray-200 px-3 py-1 text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Pricing</a></li>
    <li><a href="#" class="rounded-full border border-gray-200 px-3 py-1 text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Dashboards</a></li>
    <li><a href="#" class="rounded-full border border-gray-200 px-3 py-1 text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Forms</a></li>
  </ul>
</section>