Security 2FA Verification Code Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="code2fa-card" onsubmit="return false;"><h3>Security Check</h3><p>Enter the 4-digit code sent to your phone.</p><div class="code2fa-inputs"><input type="text" maxlength="1" value="8"><input type="text" maxlength="1" value="4"><input type="text" maxlength="1"><input type="text" maxlength="1"></div><button type="submit">Verify Code</button><div class="code2fa-resend">Didn't receive code? <a href="#">Resend</a></div></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.code2fa-card { width: 200px; background: #ffffff; border-radius: 14px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; text-align: center; margin: auto; box-sizing: border-box; }
.code2fa-card h3 { margin: 0; font-size: 12px; font-weight: 800; color: #0f172a; }
.code2fa-card p { margin: 4px 0 14px; font-size: 7px; color: #64748b; line-height: 1.3; }
.code2fa-inputs { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.code2fa-inputs input { width: 28px; height: 32px; border: 1.5px solid #e2e8f0; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 800; color: #0f172a; outline: none; transition: border-color 0.2s; }
.code2fa-inputs input:focus { border-color: #2563eb; }
.code2fa-card button { width: 100%; background: #0f172a; color: #ffffff; border: none; border-radius: 6px; padding: 8px; font-size: 8px; font-weight: 700; cursor: pointer; }
.code2fa-resend { font-size: 7px; color: #94a3b8; margin-top: 10px; }
.code2fa-resend a { color: #2563eb; text-decoration: none; font-weight: 700; }