ecommerce deals flash-sale countdown discount urgency shop deal flash-sale countdown discount urgency timer offers flash sale section with countdown deal of the day product grid
Deal of the Day Base
Fetch pattern JSON:
curl https://webspire.de/patterns/deal-of-the-day/base.json base.html
<section class="ws-deal-of-the-day ws-deal-of-day bg-[var(--ws-color-surface)] py-12">
<div class="mx-auto max-w-6xl px-6">
<!-- Header with countdown -->
<div class="mb-8 flex flex-wrap items-center justify-between gap-4">
<div>
<h2 class="text-2xl font-bold text-slate-900">Deal of the Day</h2>
<p class="mt-1 text-sm text-slate-500">Grab these items before the offer expires</p>
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-medium uppercase tracking-wider text-red-500">Ends in:</span>
<div class="flex gap-1.5">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">08</div>
<span class="self-center text-red-500 font-bold">:</span>
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">42</div>
<span class="self-center text-red-500 font-bold">:</span>
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500 text-sm font-bold text-white">15</div>
</div>
</div>
</div>
<!-- Product cards grid -->
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
<!-- Deal card 1 -->
<div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
<div class="relative aspect-square bg-slate-100">
<span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−30%</span>
<div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
<span>02d</span><span>:</span><span>08h</span><span>:</span><span>42m</span>
</div>
</div>
<div class="p-4">
<p class="text-xs text-slate-400">Category</p>
<h3 class="mt-1 text-sm font-semibold text-slate-900">Premium Wireless Headphones</h3>
<div class="mt-2 flex items-center gap-2">
<span class="text-sm text-slate-400 line-through">€129.00</span>
<span class="text-sm font-bold text-red-500">€89.90</span>
</div>
</div>
</div>
<!-- Deal card 2 -->
<div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
<div class="relative aspect-square bg-slate-100">
<span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−20%</span>
<div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
<span>01d</span><span>:</span><span>15h</span><span>:</span><span>30m</span>
</div>
</div>
<div class="p-4">
<p class="text-xs text-slate-400">Category</p>
<h3 class="mt-1 text-sm font-semibold text-slate-900">Ergonomic Office Chair</h3>
<div class="mt-2 flex items-center gap-2">
<span class="text-sm text-slate-400 line-through">€349.00</span>
<span class="text-sm font-bold text-red-500">€279.20</span>
</div>
</div>
</div>
<!-- Deal card 3 -->
<div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
<div class="relative aspect-square bg-slate-100">
<span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−40%</span>
<div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
<span>00d</span><span>:</span><span>06h</span><span>:</span><span>12m</span>
</div>
</div>
<div class="p-4">
<p class="text-xs text-slate-400">Category</p>
<h3 class="mt-1 text-sm font-semibold text-slate-900">Leather Crossbody Bag</h3>
<div class="mt-2 flex items-center gap-2">
<span class="text-sm text-slate-400 line-through">€89.00</span>
<span class="text-sm font-bold text-red-500">€53.40</span>
</div>
</div>
</div>
<!-- Deal card 4 -->
<div class="group rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] overflow-hidden">
<div class="relative aspect-square bg-slate-100">
<span class="absolute left-3 top-3 rounded-full bg-red-500 px-2.5 py-0.5 text-xs font-bold text-white">−15%</span>
<div class="absolute bottom-3 left-3 right-3 flex justify-center gap-1 rounded-lg bg-white/90 px-2 py-1.5 text-xs font-medium text-slate-700 backdrop-blur">
<span>03d</span><span>:</span><span>22h</span><span>:</span><span>55m</span>
</div>
</div>
<div class="p-4">
<p class="text-xs text-slate-400">Category</p>
<h3 class="mt-1 text-sm font-semibold text-slate-900">Smart Fitness Watch</h3>
<div class="mt-2 flex items-center gap-2">
<span class="text-sm text-slate-400 line-through">€199.00</span>
<span class="text-sm font-bold text-red-500">€169.15</span>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
ecommercedealsflash-salecountdowndiscounturgencyshop
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Title, subtitle, and section countdown timer. |
| cards | Yes | Discounted product cards with per-card countdowns. |