<div class="otp-input">
  <input type="text" maxlength="5">
  <div class="otp-box-group">
  <div aria-hidden="true" class="otp-box"><span>0</span></div>
      <div aria-hidden="true" class="otp-box"><span>0</span></div>
      <div aria-hidden="true" class="otp-box"><span>0</span></div>
      <div aria-hidden="true" class="otp-box"><span>0</span></div>
      <div aria-hidden="true" class="otp-box"><span>0</span></div>
    </div>

</div>
:root {
  --colorPrimary100: #0044FF;
  --colorAlert100: #e34b48;
  --colorDark050: #555555;
}

html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

body {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.otp-input {
  position: relative;
}

.otp-box {
  width: 42px;
  padding: 14px;
  border: 2px solid var(--colorDark050);
  border-radius: 8px;
}

input {
  position: absolute;
  top: 16px;
  left: 16px;
  letter-spacing: 40px;
  background: none;
  font-size: inherit;
  border: none;
  
}

input:focus + .otp-box-group > .otp-box {
  width: 40x;
  border: 2px solid var(--colorPrimary100);
}

input:invalid + otp-box-group > otp-box {
  border: 2px solid var(--colorAlert100);
}

.otp-box:not(:last-child) {
  margin-right: 8px;
}

.otp-box span {
  visibility: hidden;
}


.otp-box-group {
  display: flex;
}

input:focus + .otp-box {
  
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Inter:wght@400;600&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.