Social Counters

<!--
  A wrapping row of metric counters, each an icon + a number + a label - never
  colour alone. It is a <dl>: the number is the <dd>, the caption the <dt>, so a
  screen reader reads "Followers, 48.2K". Below sm the tiles wrap to two-up.
-->
<dl class="flex flex-wrap gap-3">
  <div class="flex min-w-[8rem] flex-1 items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
    </span>
    <div class="min-w-0">
      <dd class="text-xl font-bold text-gray-900 dark:text-gray-100">48.2K</dd>
      <dt class="text-xs text-gray-500 dark:text-gray-400">Followers</dt>
    </div>
  </div>
  <div class="flex min-w-[8rem] flex-1 items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="h-5 w-5" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></svg>
    </span>
    <div class="min-w-0">
      <dd class="text-xl font-bold text-gray-900 dark:text-gray-100">312K</dd>
      <dt class="text-xs text-gray-500 dark:text-gray-400">Likes</dt>
    </div>
  </div>
  <div class="flex min-w-[8rem] flex-1 items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300" aria-hidden="true">
      <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
    </span>
    <div class="min-w-0">
      <dd class="text-xl font-bold text-gray-900 dark:text-gray-100">1,204</dd>
      <dt class="text-xs text-gray-500 dark:text-gray-400">Posts</dt>
    </div>
  </div>
</dl>