Design a locked-account screen with Tailwind CSS. Centre a max-w-md card led by a red-tinted round tile with a shield glyph, a heading reading "Too many attempts", and a paragraph explaining the account is locked for fifteen minutes after five failed sign-ins. Under it, a bordered neutral-50 panel showing a countdown as a large monospaced figure with a thin progress track beneath it that empties as the timer runs, plus a muted caption naming the time the lock lifts. Below, a "Cannot wait?" section with three recovery rows as bordered buttons — email a sign-in link, use a recovery code, contact an administrator — each with a glyph tile, a label and a one-line description. Finish with a muted footer line saying the attempt was logged with its IP and location. Then add JavaScript that counts down from fifteen minutes, updates the figure and the track each second, and swaps the panel for a green "You can try again" state with a button when it reaches zero.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Design a locked-account screen with Tailwind CSS. Centre a max-w-md card led by a red-tinted round tile with a shield glyph, a heading reading "Too many attempts", and a paragraph explaining the account is locked for fifteen minutes after five failed sign-ins. Under it, a bordered neutral-50 panel showing a countdown as a large monospaced figure with a thin progress track beneath it that empties as the timer runs, plus a muted caption naming the time the lock lifts. Below, a "Cannot wait?" section with three recovery rows as bordered buttons — email a sign-in link, use a recovery code, contact an administrator — each with a glyph tile, a label and a one-line description. Finish with a muted footer line saying the attempt was logged with its IP and location. Then add JavaScript that counts down from fifteen minutes, updates the figure and the track each second, and swaps the panel for a green "You can try again" state with a button when it reaches zero.
var TOTAL = 15 * 60;
var left = TOTAL;
var panel = document.getElementById("lockPanel");
var timer = document.getElementById("lockTimer");
var track = document.getElementById("lockTrack");
function tick() {
var minutes = Math.floor(left / 60);
var seconds = left % 60;
timer.textContent = minutes + ":" + String(seconds).padStart(2, "0");
track.style.width = (left / TOTAL) * 100 + "%";
if (left > 0) {
left -= 1;
return;
}
clearInterval(handle);
// The lock has lifted — replace the countdown rather than leaving a dead 0:00.
panel.className = "mt-6 rounded-xl border border-green-200 bg-green-50 p-5 text-center";
panel.innerHTML =
'<p class="text-sm font-medium text-green-800">You can try again</p>' +
'<p class="mt-1 text-xs text-green-700">The lock has lifted. Five more attempts are available.</p>' +
'<button class="mt-4 rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white">Back to sign in</button>';
}
var handle = setInterval(tick, 1000);
tick();
