22 Tailwind CSS Countdown Timers

Each timer stores a fixed target as a Date and, on every tick, computes target - Date.now() rather than decrementing a stored counter. That is the single most important choice: a decrementing counter accumulates setInterval drift — the browser never fires exactly every 1000ms and throttles hidden tabs to roughly once a minute — so after an hour a naive counter can be seconds or minutes wrong. Recomputing from the target means the display is always correct no matter how late or irregular the tick arrives; the interval only decides how often you repaint, not what the numbers are. Demos split the remaining milliseconds into days, hours, minutes and seconds with Math.floor and modulo, pad each with padStart, and clamp at zero so a late tick never renders negative time or a stray minus sign.

Demo 02 runs a twenty-minute clock with no script at all. It registers integer custom properties with @property — one each for the tens and units of minutes and seconds — then animates each property down over the real duration with @keyframes, and renders the digit through generated content tied to that property. Because @property declares the value as an integer, the browser interpolates in whole steps, so you see 19, 18, 17 rather than a fractional blur. The limits are real and worth stating: you cannot read a target date, so the duration is hard-coded into the animation; you cannot pause, branch, or fire anything when it reaches zero; and there is no accessible announcement. Use it for a fixed, decorative, or print-friendly countdown, and reach for a few lines of JavaScript the moment the end time is dynamic or you need to act at zero.

Demo 01 is the reference. Wrap the value in a <time> element with a machine-readable datetime attribute so assistive tech gets an unambiguous instant, not just the painted digits. Put the countdown in a container with aria-live set to polite and aria-atomic true — but do not announce every second, which floods a screen reader into uselessness. Throttle announcements to a sane cadence: every minute, then every second only inside the final ten, or keep a visually-hidden summary region that updates coarsely while the visible digits tick once a second. Label the whole widget with an aria-label describing what it counts toward. Never encode urgency with colour alone; the state changes in demos 12 and 13 pair colour with a text label and weight change so colour-blind users receive the same signal the palette is carrying.

The classic report is the timer froze, then jumped when I came back. Two things cause it. First, browsers throttle setInterval in hidden tabs to about once per minute, so a timer that decrements a counter falls badly behind. Because these demos recompute from a fixed target timestamp instead, the numbers self-correct the instant the tab is foregrounded — the jump you see is the display catching up to real time, which is the correct behaviour. Second, if you drive animation with requestAnimationFrame, it stops entirely in a hidden tab, so pair it with a recompute on visibilitychange. Do not fight the throttle to keep per-second fidelity in the background; it is throttled by design and only wastes battery. Recompute on wake, repaint once, resume ticking. The anti-snipe and session-timeout demos also re-read the clock on focus so a returning user is never shown stale time.

Demo 10 counts down to a live session and prints the start time twice — once resolved to the visitor's machine and once as a fixed reference — because a bare starts in 2 hours is ambiguous across regions. Store the target as a single UTC instant: an ISO string ending in Z, or epoch milliseconds, never a wall-clock string without an offset, or every visitor computes a different end. To render the local label, pass that instant through Intl.DateTimeFormat with timeZoneName set to short, which appends the viewer's zone abbreviation automatically. The countdown arithmetic itself needs no zone handling at all: target - Date.now() is the difference of two absolute instants, so the remaining duration is identical everywhere on Earth. Zones only matter for the human-readable when, not for the number of seconds left.

Skip it when the deadline is not real. A flash-sale clock (demo 17) or waitlist timer (demo 09) that resets to the same two hours on every page load is a fake-urgency dark pattern — users recognise it, trust drops, and some jurisdictions treat invented scarcity as a deceptive practice. Only ship a visible countdown when a genuine fixed end exists: an auction close, a maintenance window, a session timeout, an OTP resend cooldown. Avoid it where it adds anxiety without benefit, such as a long reading page or a checkout you want to feel calm. For the session-timeout case (demo 03) the countdown is a courtesy, so always offer a clear stay signed in action and enough warning; a silent logout behind a three-second clock is hostile. The rule of thumb: the timer should help someone decide, not pressure them into a decision they would not otherwise make.

Demos 04 and 21 draw the ring with a single SVG <circle>. Set stroke-dasharray to the circle's full circumference (2πr) so one dash spans the whole path, then animate stroke-dashoffset from 0 up to that circumference to empty the ring, or the reverse to fill it. Compute the offset each tick as circumference * (remaining / total). Two gotchas bite everyone: a stroke is centred on its path, so a thick ring is clipped by the viewBox unless you shrink the radius or pad the box, and the arc starts at three o'clock — rotate the circle -90deg about its own centre so depletion begins at twelve. For smoothness, put a short transition on stroke-dashoffset so each per-second step eases instead of snapping, and drop that transition to an instant jump under prefers-reduced-motion.

Because every timer derives its display from a target timestamp, extending one is just moving that timestamp — you never touch the tick loop. Demo 07's anti-snipe does exactly this: a bid inside the final minute pushes the target forward by a fixed amount, the next recompute reads the new end, and the visible clock jumps up. Resetting — demo 05's OTP resend, demo 19's cart hold — means assigning a fresh target of Date.now() plus the window and re-enabling the control. Keep one source of truth for the end instant and derive everything from it; if you store both a counter and a target they drift apart and you render two conflicting values. When you extend, re-announce through the aria-live region so a screen-reader user learns the deadline changed, and guard against a runaway loop by capping how many times an auction can be extended.