CodePen Embed - OTP Input Form

<div class="container">
  <div class="otp-form">
    <div class="otp-input">
      <form action="">
        <input type="tel" maxlength="1"
               autofocus>
        <input type="tel" maxlength="1"
               autofocus>
        <input type="tel" maxlength="1"
               autofocus>
        <input type="tel" maxlength="1"
               autofocus>
      </form>
    </div>
    <button>Submit
    </button>
  </div>
</div>

  html,
  body {
    height: 100%;
    margin: 0;
  }

  .container {
    display: grid;
    place-items: center;
    min-height: 100%;
  }

  .otp-form {
    width: 20%;
    height: 50%;
    width: 20%;
    height: 50%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    place-items: center;
    justify-content: space-evenly;
  }

  input {
    font-family: "effra", Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    outline: none;
    border: none;
    background-color: rgba(214, 214, 214, 0.6);
    text-align: center;
    margin: 0 2px;
  }

  input:focus {
    /* IMPORTANT: Dont use border for giving outline, it will increase the size of the element, use box-shadow instead! */
/*     border: 2px solid;
    border-color: #0eb3ff; */
    box-shadow: 0 0 0 2px #0eb3ff;
    caret-color: #0eb3ff;
  }

// todo add js later

This Pen is owned by Kamal on CodePen.

See more by @kamalhm on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.