0 Tailwind6 with JSPublished 2026-10-05Free · no sign-up
Six countdowns styled with Tailwind and a few lines of JavaScript: four time boxes, a sale banner with an inline timer, a one-minute ring timer with controls, flip-style cards counting to midnight, a launch countdown with progress and a resend code button.
Days, hours, minutes and seconds in four dark tiles, with tabular-nums so the digits never shift as they change. The group has role="timer", which screen readers treat as a live region that stays quiet unless asked.
var end = Date.now() + ((2 * 24 + 5) * 3600 + 42 * 60) * 1000, box = document.querySelector('[role=timer]');
function pad(n) { return String(n).padStart(2, '0'); }
function tick() { var s = Math.max(0, Math.floor((end - Date.now()) / 1000)), v = { d: Math.floor(s / 86400), h: Math.floor(s % 86400 / 3600), m: Math.floor(s % 3600 / 60), s: s % 60 }; box.querySelectorAll('[data-u]').forEach(function (el) { el.textContent = pad(v[el.dataset.u]); }); }
tick(); setInterval(tick, 1000);
02. Tailwind Sale Banner with Inline Countdown
TailwindCountdownBanner
A slim promotional banner with the remaining time inline in a monospace pill and a link to the sale. It wraps cleanly on small screens with flex-wrap and keeps the timer's width steady with tabular figures.
var end = Date.now() + (2 * 3600 + 14 * 60 + 9) * 1000, el = document.getElementById('twct2');
function pad(n) { return String(n).padStart(2, '0'); }
function tick() { var s = Math.max(0, Math.floor((end - Date.now()) / 1000)); el.textContent = pad(Math.floor(s / 3600)) + ':' + pad(Math.floor(s % 3600 / 60)) + ':' + pad(s % 60); }
tick(); setInterval(tick, 1000);
03. Tailwind Circular Countdown with Controls
TailwindCountdownSVG
A one-minute timer whose ring empties as the seconds pass, with Start, Pause and Reset. The ring is an SVG circle with pathLength="100", so the dash offset is simply the percentage of time used.
var left = 60, t = null, c = document.getElementById('twct3c'), tx = document.getElementById('twct3t'), s = document.getElementById('twct3s');
function draw() { tx.textContent = Math.floor(left / 60) + ':' + String(left % 60).padStart(2, '0'); c.style.strokeDashoffset = 100 - left / 60 * 100; }
function stop() { clearInterval(t); t = null; s.textContent = 'Start'; }
s.onclick = function () { if (t) { stop(); return; } if (!left) left = 60; s.textContent = 'Pause'; t = setInterval(function () { left--; draw(); if (!left) { stop(); tx.textContent = 'Done'; } }, 1000); };
document.getElementById('twct3r').onclick = function () { stop(); left = 60; draw(); };
draw();
04. Tailwind Split-Card Countdown to Midnight
TailwindCountdownCards
Hours, minutes and seconds on dark cards with a thin line across the middle, the look of a flip clock without the flipping. The line is an after: pseudo-element, and the timer counts down to the visitor's local midnight.
var box = document.getElementById('twct4');
function pad(n) { return String(n).padStart(2, '0'); }
function tick() { var now = new Date(), mid = new Date(now); mid.setHours(24, 0, 0, 0); var s = Math.floor((mid - now) / 1000), v = { h: Math.floor(s / 3600), m: Math.floor(s % 3600 / 60), s: s % 60 }; box.querySelectorAll('[data-u]').forEach(function (el) { el.textContent = pad(v[el.dataset.u]); }); }
tick(); setInterval(tick, 1000);
05. Tailwind Launch Countdown with Progress
TailwindCountdownProgress
A launch card showing days left and a progress bar from the announcement to launch day. The bar has role="progressbar" with its values set by the script, and the remaining time is also written out in words.
var start = Date.now() - 4 * 86400000, end = Date.now() + 3 * 86400000 - 3600000, bar = document.getElementById('twct5b');
function tick() { var now = Date.now(), p = Math.min(100, (now - start) / (end - start) * 100), left = Math.max(0, end - now), d = Math.floor(left / 86400000), h = Math.floor(left % 86400000 / 3600000);
bar.firstElementChild.style.width = p + '%'; bar.setAttribute('aria-valuenow', Math.round(p)); document.getElementById('twct5d').textContent = d + ' days, ' + h + ' hours'; document.getElementById('twct5p').textContent = Math.round(p) + '% of the wait is over'; }
tick(); setInterval(tick, 60000);
06. Tailwind Resend Code Timer
TailwindCountdownForm
After sending a sign-in code, the Resend button stays disabled for 30 seconds and counts down in its own label, then becomes clickable. Using the disabled attribute means it really cannot be pressed early.