<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<fieldset class="pin-input">
  <legend>
    SECURE PIN
  </legend>
  <input aria-label="Digit one" inputmode="numeric" maxlength="1" placeholder="•">
  <input aria-label="Digit two" inputmode="numeric" maxlength="1" placeholder="•">
  <input aria-label="Digit three" inputmode="numeric" maxlength="1" placeholder="•">
  <input aria-label="Digit four" inputmode="numeric" maxlength="1" placeholder="•">
  <small>
    ENCRYPTED SESSION
  </small>
</fieldset>

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

.pin-input{display:flex;align-items:center;gap:6px;width:max-content;padding:11px 13px 8px;border:2px solid #324459;border-radius:11px;background:#e8eff4;color:#324459;font-family:Arial}.pin-input legend{padding:0 5px;font-size:8px;font-weight:800;letter-spacing:1px;color:#59728d}.pin-input input{width:32px;height:37px;border:1px solid #afbfce;border-radius:6px;outline:0;background:#f9fcfe;color:#426fd1;text-align:center;font-size:20px;font-weight:800;transition:border-color .2s,transform .2s}.pin-input input:focus{border-color:#4f75df;transform:translateY(-3px);box-shadow:0 4px 0 #b5c5dd}.pin-input small{position:absolute;margin-top:73px;margin-left:3px;color:#849aae;font-size:7px;font-weight:800;letter-spacing:1px}