Community join banner

Build a community invitation banner with Tailwind CSS. Use a max-w-4xl rounded-2xl card with a hairline border and a soft neutral-50 background, split into two columns from md up. The left column carries a small pill with a green pulse dot reading how many members are online, a heading inviting people into the community, a paragraph about what happens there, a dark join button and a muted line about the code of conduct. The right column is a stack of three faux chat messages, each a white rounded-xl card with a coloured avatar circle, a name and timestamp row, and one line of message text — one of them carrying a small reaction pill with an emoji-free glyph and a count. Rotate the cards very slightly in alternating directions with transform utilities so the stack feels informal, and straighten them on hover.

<section class="mx-auto max-w-4xl px-6 py-16">
  <div class="grid gap-10 rounded-2xl border border-neutral-200 bg-neutral-50 p-9 md:grid-cols-2 md:items-center">
    <div>
      <span class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-3 py-1 text-xs font-medium text-neutral-600">
        <span class="relative flex h-2 w-2">
          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
          <span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
        </span>
        412 members online
      </span>

      <h2 class="mt-5 text-2xl font-semibold tracking-tight text-neutral-900">Come and argue about schema design</h2>
      <p class="mt-3 text-sm leading-relaxed text-neutral-500">
        Weekly office hours, a channel where the engineers answer directly, and a job board that is not full of recruiters.
      </p>

      <a href="#" class="mt-6 inline-flex rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Join the community</a>
      <p class="mt-3 text-xs text-neutral-400">Free, moderated, and governed by a short code of conduct.</p>
    </div>

    <div class="space-y-3">
      <div class="rotate-[-1.5deg] rounded-xl border border-neutral-200 bg-white p-4 transition hover:rotate-0">
        <div class="flex items-center gap-2.5">
          <span class="grid h-8 w-8 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white">DK</span>
          <span class="text-sm font-medium text-neutral-900">dana</span>
          <span class="text-xs text-neutral-400">09:12</span>
        </div>
        <p class="mt-2 text-sm leading-relaxed text-neutral-600">Has anyone partitioned by tenant and regretted it? Asking for a table with 400M rows.</p>
      </div>

      <div class="rotate-[1deg] rounded-xl border border-neutral-200 bg-white p-4 transition hover:rotate-0">
        <div class="flex items-center gap-2.5">
          <span class="grid h-8 w-8 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white">JP</span>
          <span class="text-sm font-medium text-neutral-900">jules</span>
          <span class="text-xs text-neutral-400">09:14</span>
        </div>
        <p class="mt-2 text-sm leading-relaxed text-neutral-600">Regretted it at 40 tenants, loved it at 4,000. It is entirely about the shape of your queries.</p>
        <span class="mt-2.5 inline-flex items-center gap-1 rounded-full border border-neutral-200 px-2 py-0.5 text-xs text-neutral-500"><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> 14</span>
      </div>

      <div class="rotate-[-0.5deg] rounded-xl border border-neutral-200 bg-white p-4 transition hover:rotate-0">
        <div class="flex items-center gap-2.5">
          <span class="grid h-8 w-8 place-items-center rounded-full bg-green-600 text-[11px] font-medium text-white">MO</span>
          <span class="text-sm font-medium text-neutral-900">mira · team</span>
          <span class="text-xs text-neutral-400">09:20</span>
        </div>
        <p class="mt-2 text-sm leading-relaxed text-neutral-600">Office hours Thursday 15:00 UTC — bring the query plan and we will read it together.</p>
      </div>
    </div>
  </div>
</section>