OTP / Verification Code Input

<div class="otp" id="otp">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
  <input maxlength="1" inputmode="numeric" pattern="[0-9]">
</div>
<div class="otp-out" id="otpOut">Enter the 6-digit code</div>

*{box-sizing:border-box}body{text-align:center}
.otp{display:flex;gap:10px;justify-content:center}
.otp input{width:50px;height:60px;text-align:center;font-size:26px;font-weight:700;border:2px solid #d8dce6;border-radius:12px;color:#1a1f36;outline:none;transition:.15s;font-family:system-ui,sans-serif}
.otp input:focus{border-color:#5b6cff;box-shadow:0 0 0 4px rgba(91,108,255,.16)}
.otp input.filled{border-color:#5b6cff;background:#f5f7ff}
.otp-out{margin-top:18px;font-family:system-ui,sans-serif;font-weight:600;color:#8a91a6}
.otp-out.done{color:#16a34a}

var box=document.getElementById('otp'),inputs=[].slice.call(box.querySelectorAll('input')),out=document.getElementById('otpOut');
function check(){var code=inputs.map(function(i){return i.value}).join('');if(code.length===6){out.textContent='Code: '+code;out.classList.add('done')}else{out.textContent='Enter the 6-digit code';out.classList.remove('done')}}
inputs.forEach(function(inp,i){
  inp.addEventListener('input',function(){inp.value=inp.value.replace(/[^0-9]/g,'');inp.classList.toggle('filled',!!inp.value);if(inp.value&&i<inputs.length-1)inputs[i+1].focus();check()});
  inp.addEventListener('keydown',function(e){if(e.key==='Backspace'&&!inp.value&&i>0)inputs[i-1].focus()});
  inp.addEventListener('paste',function(e){e.preventDefault();var d=(e.clipboardData.getData('text')||'').replace(/[^0-9]/g,'').slice(0,6);d.split('').forEach(function(ch,j){if(inputs[j]){inputs[j].value=ch;inputs[j].classList.add('filled')}});if(inputs[Math.min(d.length,5)])inputs[Math.min(d.length,5)].focus();check()});
});