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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
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>
