Search Results Highlight

<div class="mx-auto w-full max-w-md">
  <label class="sr-only" for="hl-search">Search</label>
  <input id="hl-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" />
  <p class="mt-3 text-xs text-gray-600 dark:text-gray-300" role="status" aria-live="polite">2 matches</p>
  <ul class="mt-1 space-y-1">
    <!-- The match is wrapped in <mark>, which is semantic (relevance), not just a
         yellow span; the surrounding text stays plain. -->
    <li class="rounded-md px-3 py-2 text-sm text-gray-800 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800">Quarterly <mark class="rounded bg-yellow-200 text-gray-900 dark:bg-yellow-500/40 dark:text-yellow-100">report</mark></li>
    <li class="rounded-md px-3 py-2 text-sm text-gray-800 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800">Annual <mark class="rounded bg-yellow-200 text-gray-900 dark:bg-yellow-500/40 dark:text-yellow-100">report</mark> 2026</li>
  </ul>
</div>