Store Locator List

<!-- Static snapshot: the first store is active. In a framework, a shared state links list item and pin. -->
<div class="grid w-full gap-4 rounded-2xl border border-gray-200 bg-white p-4 md:grid-cols-2 dark:border-gray-800 dark:bg-gray-950">
  <ul class="space-y-2">
    <li>
      <button type="button" aria-pressed="true" class="w-full rounded-xl border border-blue-600 bg-blue-50 p-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-blue-500 dark:bg-blue-500/10">
        <span class="flex items-center justify-between gap-2">
          <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Downtown</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">0.4 km</span>
        </span>
        <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">12 Market St</span>
      </button>
    </li>
    <li>
      <button type="button" aria-pressed="false" class="w-full rounded-xl border border-gray-200 p-3 text-left hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-800 dark:hover:bg-gray-900">
        <span class="flex items-center justify-between gap-2">
          <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Harbour</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">2.1 km</span>
        </span>
        <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">4 Pier Road</span>
      </button>
    </li>
  </ul>
  <div class="relative order-first aspect-[4/3] w-full overflow-hidden rounded-xl bg-gray-50 md:order-none dark:bg-gray-900">
    <svg aria-hidden="true" class="absolute inset-0 h-full w-full text-gray-300 dark:text-gray-700" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="store-dots" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1.4" fill="currentColor" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#store-dots)" />
    </svg>
    <button type="button" aria-label="Downtown store" style="left:38%;top:44%" class="absolute flex h-11 w-11 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="h-4 w-4 rounded-full bg-blue-700 ring-4 ring-blue-500/40 dark:bg-blue-300"></span>
    </button>
    <button type="button" aria-label="Harbour store" style="left:68%;top:64%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
      <span class="h-3 w-3 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
    </button>
  </div>
</div>