Hotspot Beacons

<!--
  Pulsing beacons over a mock UI. The pulse is animate-ping and carries
  motion-reduce:hidden, so reduced-motion users get a steady dot instead of a
  throb. Each beacon is a real button; the popover is width-clamped (w-40) and
  its horizontal alignment flips by position so it never runs off the edge. Wire
  open/close (focus + click) with JS - see the React/TypeScript tabs.
-->
<div class="relative isolate mx-auto aspect-[4/3] w-full max-w-md overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-br from-gray-100 to-gray-200 dark:border-gray-800 dark:from-gray-900 dark:to-gray-950">
  <div class="absolute inset-0 p-4" aria-hidden="true">
    <div class="h-3 w-24 rounded bg-gray-300 dark:bg-gray-700"></div>
    <div class="mt-3 h-16 w-full rounded-lg bg-white/70 dark:bg-gray-800/70"></div>
    <div class="mt-3 grid grid-cols-3 gap-2">
      <div class="h-10 rounded-lg bg-white/70 dark:bg-gray-800/70"></div>
      <div class="h-10 rounded-lg bg-white/70 dark:bg-gray-800/70"></div>
      <div class="h-10 rounded-lg bg-white/70 dark:bg-gray-800/70"></div>
    </div>
  </div>

  <div class="absolute" style="left:24%;top:22%">
    <button type="button" aria-expanded="false" aria-label="Search" class="relative -ml-2 -mt-2 flex h-4 w-4 items-center justify-center rounded-full focus:outline-none">
      <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500/70 motion-reduce:hidden" aria-hidden="true"></span>
      <span class="relative inline-flex h-3 w-3 rounded-full bg-blue-600 ring-2 ring-white dark:ring-gray-900"></span>
    </button>
  </div>

  <div class="absolute" style="left:70%;top:60%">
    <button type="button" aria-expanded="true" aria-label="Filters" class="relative -ml-2 -mt-2 flex h-4 w-4 items-center justify-center rounded-full focus:outline-none">
      <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500/70 motion-reduce:hidden" aria-hidden="true"></span>
      <span class="relative inline-flex h-3 w-3 rounded-full bg-blue-600 ring-2 ring-blue-300 dark:ring-blue-500"></span>
    </button>
    <div role="tooltip" class="absolute right-0 top-full z-20 mt-2 w-40 rounded-lg border border-gray-200 bg-white p-3 text-left shadow-xl dark:border-gray-700 dark:bg-gray-900">
      <p class="text-xs font-semibold text-gray-900 dark:text-gray-100">Filters</p>
      <p class="mt-1 text-xs leading-relaxed text-gray-600 dark:text-gray-400">Narrow the list by owner, status or date.</p>
    </div>
  </div>
</div>