countdown timer urgency event launch cta countdown timer digits urgency event launch register countdown timer section for event launch countdown with registration button urgency section with digit boxes
Countdown Base
Fetch pattern JSON:
curl https://webspire.de/patterns/countdown/base.json base.html
<section class="ws-countdown bg-indigo-600" style="--countdown-primary: var(--ws-color-primary);" aria-label="Event countdown">
<div class="mx-auto max-w-3xl px-4 py-16 text-center sm:py-24">
<h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Event Starts In</h2>
<p class="mt-2 text-indigo-200">Join us for an unforgettable experience — mark your calendar.</p>
<time datetime="2026-04-15T09:00:00Z" class="mt-10 flex items-center justify-center gap-4 sm:gap-6">
<div class="flex w-20 flex-col items-center rounded-xl bg-white/10 px-4 py-5 backdrop-blur-sm sm:w-24 sm:py-6">
<span class="text-4xl font-extrabold tabular-nums text-white sm:text-5xl">12</span>
<span class="mt-1 text-xs font-medium uppercase tracking-wider text-indigo-200">Days</span>
</div>
<div class="flex w-20 flex-col items-center rounded-xl bg-white/10 px-4 py-5 backdrop-blur-sm sm:w-24 sm:py-6">
<span class="text-4xl font-extrabold tabular-nums text-white sm:text-5xl">08</span>
<span class="mt-1 text-xs font-medium uppercase tracking-wider text-indigo-200">Hours</span>
</div>
<div class="flex w-20 flex-col items-center rounded-xl bg-white/10 px-4 py-5 backdrop-blur-sm sm:w-24 sm:py-6">
<span class="text-4xl font-extrabold tabular-nums text-white sm:text-5xl">45</span>
<span class="mt-1 text-xs font-medium uppercase tracking-wider text-indigo-200">Minutes</span>
</div>
<div class="flex w-20 flex-col items-center rounded-xl bg-white/10 px-4 py-5 backdrop-blur-sm sm:w-24 sm:py-6">
<span class="text-4xl font-extrabold tabular-nums text-white sm:text-5xl">30</span>
<span class="mt-1 text-xs font-medium uppercase tracking-wider text-indigo-200">Seconds</span>
</div>
</time>
<div class="mt-10">
<a href="#register" class="inline-flex items-center rounded-lg bg-white px-6 py-3 text-sm font-semibold text-indigo-600 shadow-sm transition hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"> <!-- ws-ok -->
Register Now
<svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
</a>
</div>
</div>
</section>
Details
Responsive Tailwind Only SSR Safe Copy & Paste
Stable Published
countdowntimerurgencyeventlaunchcta
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle text. |
| digits | Yes | Four digit boxes showing days, hours, minutes, seconds. |
| cta | Yes | Call-to-action button below the countdown. |
Full-width countdown section with an indigo-600 background. Four rounded digit boxes display days (12), hours (08), minutes (45), and seconds (30) in large bold numbers with small labels underneath. A white CTA button sits below. Uses <time> element for semantics. Numbers are static — replace with JavaScript for a live countdown.