Feed Post Cards

<!--
  Each post is an <article>. Engagement is icon + number, never colour alone, so
  a like count reads the same in greyscale. Counts are given accessible names via
  the sr-only span; the glyph itself is aria-hidden.
-->
<div class="mx-auto w-full max-w-md space-y-3">
  <article class="rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center gap-3">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-xs font-bold text-white" aria-hidden="true">MJ</span>
      <div class="min-w-0">
        <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Maya Juno</p>
        <p class="truncate text-xs text-gray-500 dark:text-gray-400">&#64;mayaj &middot; 2h</p>
      </div>
    </div>
    <p class="mt-3 text-sm leading-relaxed text-gray-700 dark:text-gray-200">
      Shipped the new dashboard today. Smaller bundle, faster paint, and it finally
      works on a 320px screen.
    </p>
    <div class="mt-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 dark:text-gray-400">
      <span class="inline-flex items-center gap-1.5">
        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
        24<span class="sr-only"> replies</span>
      </span>
      <span class="inline-flex items-center gap-1.5">
        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
        112<span class="sr-only"> reposts</span>
      </span>
      <span class="inline-flex items-center gap-1.5">
        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" aria-hidden="true"><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>
        1.2K<span class="sr-only"> likes</span>
      </span>
    </div>
  </article>
</div>