CTA Banners
Webinar registration strip
Session details and a two-field signup
Session details and a two-field signup
Build a webinar registration block with Tailwind CSS as a wide bordered card split into two parts. The left part carries a small "Live session" pill with a red dot, a heading naming the session, a two-line description, a row of three detail items with glyph tiles for date, duration and format, and a line of speaker credits with two small overlapping avatars and their names and roles. The right part is a neutral-50 panel with a heading reading "Save your seat", an email field, a company field, a dark full-width register button, and under it a muted line saying the recording is sent to everyone who registers even if they cannot attend. Add a bottom bar across the whole card showing three past-session links with dates in monospace and a link to the full archive on the right.<section class="mx-auto max-w-5xl px-6 py-16">
<div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
<div class="grid lg:grid-cols-[1.3fr_1fr]">
<div class="p-8">
<span class="inline-flex items-center gap-2 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-medium text-red-700">
<span class="h-1.5 w-1.5 rounded-full bg-red-500"></span> Live session
</span>
<h2 class="mt-5 text-2xl font-semibold tracking-tight text-neutral-900">Migrating 2 billion rows without a maintenance window</h2>
<p class="mt-3 max-w-lg leading-relaxed text-neutral-500">
The dual-write pattern, how we validated the backfill, and the two decisions we would make differently. Bring your questions — the last twenty minutes are yours.
</p>
<div class="mt-7 flex flex-wrap gap-x-8 gap-y-4">
<div class="flex items-center gap-2.5">
<span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></span>
<div>
<p class="text-sm font-medium text-neutral-900">Thu 4 Sep</p>
<p class="text-xs text-neutral-500">15:00 CET</p>
</div>
</div>
<div class="flex items-center gap-2.5">
<span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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 11a8 8 0 1 0-2.34 5.66"/><path d="M20 4v7h-7"/></svg></span>
<div>
<p class="text-sm font-medium text-neutral-900">60 minutes</p>
<p class="text-xs text-neutral-500">40 talk, 20 questions</p>
</div>
</div>
<div class="flex items-center gap-2.5">
<span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></span>
<div>
<p class="text-sm font-medium text-neutral-900">Online</p>
<p class="text-xs text-neutral-500">Recorded and captioned</p>
</div>
</div>
</div>
<div class="mt-7 flex items-center gap-3 border-t border-neutral-200 pt-5">
<span class="flex">
<span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-[11px] font-medium text-white ring-2 ring-white">MO</span>
<span class="-ml-2 grid h-9 w-9 place-items-center rounded-full bg-amber-500 text-[11px] font-medium text-white ring-2 ring-white">TS</span>
</span>
<p class="text-sm text-neutral-600">
<span class="font-medium text-neutral-900">Mira Osei</span>, staff engineer, and <span class="font-medium text-neutral-900">Tom Silva</span>, who ran the cutover.
</p>
</div>
</div>
<div class="border-t border-neutral-200 bg-neutral-50 p-8 lg:border-l lg:border-t-0">
<h3 class="text-base font-semibold text-neutral-900">Save your seat</h3>
<p class="mt-1 text-sm text-neutral-500">Two fields, no sales follow-up.</p>
<form class="mt-5 space-y-3">
<input type="email" placeholder="[email protected]"
class="w-full rounded-xl border border-neutral-200 bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
<input type="text" placeholder="Company"
class="w-full rounded-xl border border-neutral-200 bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
<button class="w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Register free</button>
</form>
<p class="mt-3 text-xs leading-relaxed text-neutral-500">Cannot make the time? Register anyway — everyone gets the recording and the slides the next morning.</p>
</div>
</div>
<div class="flex flex-wrap items-center justify-between gap-4 border-t border-neutral-200 px-8 py-4">
<div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-neutral-500">
<a href="#" class="hover:text-neutral-900"><span class="font-mono text-neutral-400">07 Aug</span> · Query plans, read slowly</a>
<a href="#" class="hover:text-neutral-900"><span class="font-mono text-neutral-400">10 Jul</span> · On-call that people tolerate</a>
<a href="#" class="hover:text-neutral-900"><span class="font-mono text-neutral-400">12 Jun</span> · Deleting staging</a>
</div>
<a href="#" class="text-xs font-medium text-neutral-900 underline-offset-4 hover:underline">All past sessions <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
</div>
</div>
</section>