Social post wall

Create a wall of social posts with Tailwind CSS presented in a masonry-feeling three-column layout using CSS columns. Each post is a bordered rounded-xl white card kept whole with break-inside avoid: a header row with a round avatar, a display name in medium weight, a muted handle and a small platform glyph on the right, then the post body in relaxed text where mentions and hashtags are wrapped in blue-toned spans, then a footer row with a timestamp and two muted engagement counts with glyphs. Vary the post lengths so the columns stagger naturally, and give two of the seven posts a subtle neutral-900 border to mark them as favourites. Above the wall, a centred heading and a muted line inviting people to add their own with a hashtag.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="mx-auto max-w-xl text-center">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">What people say when we are not in the room</h2>
    <p class="mt-3 text-neutral-500">Unprompted, unedited, and occasionally rude about our old logo.</p>
  </div>

  <div class="mt-12 columns-1 gap-5 sm:columns-2 lg:columns-3">
    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-900 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">DK</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Dana Køhler</span><span class="block truncate text-xs text-neutral-400">@dkohler</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Replaced 400 lines of glue code with one <span class="text-blue-600">@northwind</span> workflow. The diff was the most satisfying thing I shipped all month.</p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>2h</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 214</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 18</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-200 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white">JP</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Jules Park</span><span class="block truncate text-xs text-neutral-400">@julespark</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 9v11M7 5v.01M11 20v-6.5a4.5 4.5 0 0 1 9 0V20M11 9v11"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Six months in and the bill has not surprised us once. Genuinely rare. <span class="text-blue-600">#dataops</span></p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>5h</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 96</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 4</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-200 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-green-600 text-[11px] font-medium text-white">MO</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Mira Osei</span><span class="block truncate text-xs text-neutral-400">@miraosei</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Support answered on a Sunday with an actual query plan, not a link to the docs. Then they fixed the docs. <span class="text-blue-600">@northwind</span></p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>1d</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 418</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 27</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-200 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-500 text-[11px] font-medium text-white">TS</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Tom Silva</span><span class="block truncate text-xs text-neutral-400">@tsilva</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Migrated 2.1B rows over a weekend. Zero incidents, one very calm Slack channel, and a runbook that actually matched reality. Whoever wrote that runbook, thank you.</p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>2d</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 731</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 44</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-900 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-blue-600 text-[11px] font-medium text-white">LR</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Lena Rask</span><span class="block truncate text-xs text-neutral-400">@lenarask</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 9v11M7 5v.01M11 20v-6.5a4.5 4.5 0 0 1 9 0V20M11 9v11"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Our auditor asked for evidence and I sent a link. That was the whole meeting. <span class="text-blue-600">#soc2</span></p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>3d</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 302</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 12</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-200 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">HB</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Hana Brandt</span><span class="block truncate text-xs text-neutral-400">@hbrandt</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">The old dashboard took 11 seconds. This one is instant and I have stopped apologising in meetings.</p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>4d</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 158</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 9</span></div>
    </article>

    <article class="mb-5 break-inside-avoid rounded-xl border border-neutral-200 bg-white p-5">
      <div class="flex items-center gap-2.5">
        <span class="grid h-9 w-9 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white">RG</span>
        <span class="min-w-0 flex-1"><span class="block truncate text-sm font-medium text-neutral-900">Ravi Gopal</span><span class="block truncate text-xs text-neutral-400">@ravigopal</span></span>
        <span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M5 4l14 16M19 4 5 20"/></svg></span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-neutral-700">Onboarded three analysts this week. None of them asked me a single question, which is the highest praise a tool can get.</p>
      <div class="mt-4 flex items-center gap-4 text-xs text-neutral-400"><span>6d</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 10v11H3V10h4Zm0 9h10.2a2 2 0 0 0 1.9-1.4l1.7-5A2 2 0 0 0 18.9 10H15l.7-3.1A3.2 3.2 0 0 0 12.5 3L7 10Z"/></svg> 244</span><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 15a3 3 0 0 1-3 3H9l-5 3v-6a3 3 0 0 1-1-2V7a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v8Z"/></svg> 15</span></div>
    </article>
  </div>

  <p class="mt-6 text-center text-sm text-neutral-500">Post yours with <span class="font-medium text-neutral-900">#builtonnorthwind</span> — we read every one.</p>
</section>