Coverage Stats Map

<div class="relative w-full overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
  <div class="relative aspect-[16/9] w-full">
    <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="coverage-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(#coverage-dots)" />
    </svg>
    <div class="absolute inset-x-3 bottom-3 rounded-xl border border-gray-200 bg-white/90 p-3 backdrop-blur sm:inset-x-4 sm:bottom-4 dark:border-gray-800 dark:bg-gray-900/90">
      <dl class="grid grid-cols-3 gap-2 text-center">
        <div>
          <dt class="text-xs text-gray-500 dark:text-gray-400">Countries</dt>
          <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">150+</dd>
        </div>
        <div>
          <dt class="text-xs text-gray-500 dark:text-gray-400">Cities</dt>
          <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">4,000</dd>
        </div>
        <div>
          <dt class="text-xs text-gray-500 dark:text-gray-400">Uptime</dt>
          <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">99.99%</dd>
        </div>
      </dl>
    </div>
  </div>
</div>