coming-soon countdown launch overlay dark full-screen subscribe email coming-soon countdown launch overlay dark full-screen email subscribe timer social coming soon page with countdown timer full screen launch countdown with email form dark overlay coming soon with social links
Coming Soon Countdown Overlay
Fetch pattern JSON:
curl https://webspire.de/patterns/coming-soon/countdown-overlay.json countdown-overlay.html
<section class="ws-coming-soon relative flex min-h-screen items-center justify-center overflow-hidden" aria-label="Coming soon page">
<!-- Background gradient (replace with real image + bg-cover bg-center) -->
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-950" aria-hidden="true"></div>
<!-- Dark overlay -->
<div class="absolute inset-0 bg-black/60" aria-hidden="true"></div>
<!-- Content -->
<div class="relative z-10 mx-auto max-w-2xl px-6 py-20 text-center text-white">
<!-- Logo placeholder -->
<div class="mx-auto mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/10 backdrop-blur-sm ring-1 ring-white/20" aria-hidden="true">
<svg class="h-8 w-8 text-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<!-- Eyebrow -->
<p class="text-sm font-semibold uppercase tracking-[0.2em] text-white/60">Coming soon</p>
<!-- Heading -->
<h1 class="mt-4 text-balance text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
Something big<br>is coming
</h1>
<p class="mx-auto mt-4 max-w-md text-base text-white/70">
We're working on something amazing. Leave your email and be the first to know when we launch.
</p>
<!-- Countdown -->
<div class="mt-10 flex flex-wrap justify-center gap-4" role="timer" aria-label="Launch countdown">
<div class="flex flex-col items-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm ring-1 ring-white/10 min-w-[80px]">
<span class="text-4xl font-extrabold tabular-nums text-white">42</span>
<span class="mt-1 text-xs font-medium uppercase tracking-widest text-white/60">Days</span>
</div>
<div class="flex flex-col items-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm ring-1 ring-white/10 min-w-[80px]">
<span class="text-4xl font-extrabold tabular-nums text-white">08</span>
<span class="mt-1 text-xs font-medium uppercase tracking-widest text-white/60">Hours</span>
</div>
<div class="flex flex-col items-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm ring-1 ring-white/10 min-w-[80px]">
<span class="text-4xl font-extrabold tabular-nums text-white">23</span>
<span class="mt-1 text-xs font-medium uppercase tracking-widest text-white/60">Minutes</span>
</div>
<div class="flex flex-col items-center rounded-2xl bg-white/10 px-6 py-4 backdrop-blur-sm ring-1 ring-white/10 min-w-[80px]">
<span class="text-4xl font-extrabold tabular-nums text-white">51</span>
<span class="mt-1 text-xs font-medium uppercase tracking-widest text-white/60">Seconds</span>
</div>
</div>
<!-- Email subscribe form -->
<form class="mx-auto mt-10 flex max-w-md flex-col gap-3 sm:flex-row" novalidate>
<label class="sr-only" for="cs-email">Email address</label>
<input
id="cs-email"
type="email"
placeholder="Enter your email"
autocomplete="email"
class="w-full rounded-xl border border-white/20 bg-white/10 px-5 py-3 text-sm text-white placeholder-white/40 backdrop-blur-sm outline-none transition focus:border-white/50 focus:ring-2 focus:ring-white/20"
>
<button type="submit" class="shrink-0 rounded-xl bg-[var(--ws-color-accent)] px-6 py-3 text-sm font-semibold text-white transition hover:opacity-90">
Notify me
</button>
</form>
<p class="mt-3 text-xs text-white/40">No spam. We'll only write when it matters.</p>
<!-- Social icons row -->
<div class="mt-10 flex items-center justify-center gap-4" aria-label="Follow us">
<a href="#" aria-label="Twitter" class="text-white/40 transition hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" aria-label="Instagram" class="text-white/40 transition hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-white/40 transition hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="#" aria-label="GitHub" class="text-white/40 transition hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
coming-sooncountdownlaunchoverlaydarkfull-screensubscribeemail
Slots
| Name | Required | Description |
|---|---|---|
| logo | No | Logo or brand mark in a frosted glass circle. |
| eyebrow | No | Small uppercase label above the main heading. |
| heading | Yes | Main launch headline. |
| countdown | Yes | Four-unit timer display (Days / Hours / Minutes / Seconds). |
| subscribe-form | Yes | Email input and notify button. |
| social | No | Row of social icon links. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| targetDate | string | ISO date string for the countdown target. Wire up with JS. |
Full-screen coming soon page with a dark gradient background (replace with real image) and a semi-transparent overlay. Centers a logo placeholder, eyebrow text, large heading, a 4-unit countdown (Days/Hours/Minutes/Seconds) with frosted glass tiles, an email subscribe form, and a social icons row. Add JS for a live countdown and form submission.