Locked Account

Account unavailable due to security state.

html

<div class="locked" role="alert">
  <span class="locked__icon" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></span>
  <h3 class="locked__heading">Your account is locked</h3>
  <p class="locked__reason" data-reason="Too many attempts">Reason: Too many attempts</p>
  <p class="locked__next">Try again in <strong>25 minutes</strong>, or reset your password to regain access now.</p>
  <button type="button" class="locked__reset">Reset password</button>
</div>
<style>
.locked { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FBEAEA; width: 300px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1.5px solid #D64545; text-align: center; }
.locked__icon { display: inline-flex; color: #D64545; margin-bottom: 8px; }
.locked__heading { margin: 0 0 8px; font-size: 16px; }
.locked__reason { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #a32020; }
.locked__next { margin: 0 0 16px; font-size: 13px; color: #241430cc; }
.locked__reset { width: 100%; padding: 10px; border-radius: 8px; border: none; background: #D64545; color: #FAF7F2; font-weight: 700; cursor: pointer; }
.locked__reset:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-5 rounded-2xl box-border border-[1.5px] border-[#D64545] font-sans text-sm text-[#241430] bg-[#FBEAEA] text-center" role="alert">
  <span class="inline-flex text-[#D64545] mb-2" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></span>
  <h3 class="m-0 mb-2 text-base">Your account is locked</h3>
  <p class="m-0 mb-2.5 text-xs font-bold uppercase tracking-wide text-[#a32020]" data-reason="Too many attempts">Reason: Too many attempts</p>
  <p class="m-0 mb-4 text-[13px] text-[#241430]/80">Try again in <strong>25 minutes</strong>, or reset your password to regain access now.</p>
  <button type="button" class="w-full py-2.5 rounded-lg border-none bg-[#D64545] text-[#FAF7F2] font-bold cursor-pointer">Reset password</button>
</div>

react

export function LockedAccount({
  heading = "Your account is locked",
  reason = "Too many attempts",
  retryTime = "25 minutes",
  showResetLink = true,
}) {
  return (
    <div role="alert" style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FBEAEA", width: 300, padding: 20, borderRadius: 14, boxSizing: "border-box", border: "1.5px solid #D64545", textAlign: "center" }}>
      <span aria-hidden="true" style={{ display: "inline-flex", color: "#D64545", marginBottom: 8 }}>
        <svg width="24" height="24" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none" stroke="currentColor" strokeWidth="1.6" /></svg>
      </span>
      <h3 style={{ margin: "0 0 8px", fontSize: 16 }}>{heading}</h3>
      <p style={{ margin: "0 0 10px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em", color: "#a32020" }}>Reason: {reason}</p>
      <p style={{ margin: "0 0 16px", fontSize: 13, color: "#241430cc" }}>Try again in <strong>{retryTime}</strong>, or reset your password to regain access now.</p>
      {showResetLink && <button type="button" style={{ width: "100%", padding: 10, borderRadius: 8, border: "none", background: "#D64545", color: "#FAF7F2", fontWeight: 700, cursor: "pointer" }}>Reset password</button>}
    </div>
  );
}