OTP

One-time password.

html

<form class="otp" data-digits="6" style="--accent:#A8E6C1;">
  <h3 class="otp__heading">Enter the code</h3>
  <p class="otp__sub">Code sent to j***@example.com</p>
  <div class="otp__boxes" role="group" aria-label="One-time code">
    <input class="otp__box otp__box--4up" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" aria-label="Digit 1" />
    <input class="otp__box otp__box--4up" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
    <input class="otp__box otp__box--4up" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
    <input class="otp__box otp__box--4up" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
    <input class="otp__box otp__box--6only" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5" />
    <input class="otp__box otp__box--6only" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6" />
  </div>
  <button type="submit" class="otp__submit">Verify code</button>
  <p class="otp__resend"><span class="otp__wait">Resend available in 0:28</span></p>
</form>
<style>
.otp { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }
.otp__heading { margin: 0 0 6px; font-size: 16px; }
.otp__sub { margin: 0 0 16px; font-size: 13px; color: #24143099; }
.otp__boxes { display: flex; gap: 8px; margin-bottom: 16px; }
.otp__box { width: 40px; height: 46px; text-align: center; font-size: 20px; border-radius: 8px; border: 1.5px solid #24143030; font-variant-numeric: tabular-nums; }
.otp__box:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.otp[data-digits="4"] .otp__box--6only { display: none; }
.otp__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; }
.otp__resend { margin: 12px 0 0; font-size: 13px; text-align: center; }
.otp__resendbtn { background: none; border: none; color: #241430; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.otp__wait { color: #24143099; }
</style>

tailwind

<form class="w-[320px] p-5 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] otp-tw" data-digits="6">
  <h3 class="m-0 mb-1.5 text-base">Enter the code</h3>
  <p class="m-0 mb-4 text-[13px] text-[#241430]/60">Code sent to j***@example.com</p>
  <div class="flex gap-2 mb-4" role="group" aria-label="One-time code">
    <input class="w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" aria-label="Digit 1" />
    <input class="w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
    <input class="w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
    <input class="w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
    <input class="otp-tw-6only w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5" />
    <input class="otp-tw-6only w-10 h-[46px] text-center text-xl rounded-lg border-[1.5px] border-[#24143030] tabular-nums" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6" />
  </div>
  <button type="submit" class="w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]" style="background:#A8E6C1">Verify code</button>
  <p class="mt-3 mb-0 text-[13px] text-center"><span class="text-[#241430]/60">Resend available in 0:28</span></p>
</form>
<style>
.otp-tw[data-digits="4"] .otp-tw-6only { display: none; }
</style>

react

export function Otp({
  heading = "Enter the code",
  destination = "j***@example.com",
  digits = "6",
  resendEnabled = false,
  accent = "#A8E6C1",
}) {
  const count = Number(digits);
  const boxStyle = { width: 40, height: 46, textAlign: "center", fontSize: 20, borderRadius: 8, border: "1.5px solid #24143030", fontVariantNumeric: "tabular-nums" };
  return (
    <form style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 320, padding: 20, borderRadius: 14, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <h3 style={{ margin: "0 0 6px", fontSize: 16 }}>{heading}</h3>
      <p style={{ margin: "0 0 16px", fontSize: 13, color: "#24143099" }}>Code sent to {destination}</p>
      <div role="group" aria-label="One-time code" style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        {Array.from({ length: count }).map((_, i) => (
          <input key={i} type="text" inputMode="numeric" autoComplete={i === 0 ? "one-time-code" : undefined} maxLength={1} aria-label={`Digit ${i + 1}`} style={boxStyle} />
        ))}
      </div>
      <button type="submit" style={{ width: "100%", padding: 10, borderRadius: 8, border: "none", background: accent, color: "#14351f", fontWeight: 700, cursor: "pointer" }}>Verify code</button>
      <p style={{ margin: "12px 0 0", fontSize: 13, textAlign: "center" }}>
        {resendEnabled
          ? <button type="button" style={{ background: "none", border: "none", color: "#241430", fontWeight: 700, textDecoration: "underline", cursor: "pointer", fontSize: 13, padding: 0 }}>Resend code</button>
          : <span style={{ color: "#24143099" }}>Resend available in 0:28</span>}
      </p>
    </form>
  );
}