Office Locations Map

<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">
  <div class="relative order-2 aspect-[4/3] w-full overflow-hidden rounded-xl bg-gray-50 md:order-1 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="office-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(#office-dots)" />
    </svg>
    <button type="button" aria-label="Berlin office" style="left:30%;top:34%" 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.5 w-3.5 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
    </button>
    <button type="button" aria-label="Austin office" style="left:64%;top:60%" 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.5 w-3.5 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
    </button>
  </div>
  <ul class="order-1 space-y-3 md:order-2">
    <li class="rounded-xl border border-gray-200 p-3 dark:border-gray-800">
      <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Berlin</p>
      <p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">Torstrasse 21, 10119</p>
    </li>
    <li class="rounded-xl border border-gray-200 p-3 dark:border-gray-800">
      <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Austin</p>
      <p class="mt-0.5 text-sm text-gray-600 dark:text-gray-400">120 Congress Ave, TX 78701</p>
    </li>
  </ul>
</div>