JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
  <input type="text" id="digit-1" name="digit-1" data-next="digit-2" placeholder="-" />
  <input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" placeholder="-" />
  <input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" placeholder="-" />
  <input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" placeholder="-" />
  <input type="text" id="digit-5" name="digit-5" data-next="digit-6" data-previous="digit-4" placeholder="-" />
  <input type="text" id="digit-6" name="digit-6" data-previous="digit-5" placeholder="-" />
</form>

CSS

@import url('https://fonts.googleapis.com/css?family=Raleway:200');

$BaseBG: #ffffff;

body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 200;
}

body {
  background-color: $BaseBG;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.digit-group input {
    width: 60px;
    height: 60px;
    background-color: lighten($BaseBG, 5%);
    border: none;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: black;
    margin: 0 2px;
    border-radius: 18px;
    border: 3px solid #293886;
  }

.prompt {
  margin-bottom: 20px;
  font-size: 20px;
  color: white;
}

::-webkit-input-placeholder {
  /* Edge */
  font-weight: 800;
  color: #9c9a9a;
}

:-ms-input-placeholder {
  /* Internet Explorer */
  font-weight: 800;
  color: #9c9a9a;
}

::placeholder {
  font-weight: 900;
  color: #9c9a9a;
}

JavaScript

$('.digit-group').find('input').each(function() {
  $(this).attr('maxlength', 1);
  $(this).on('keyup', function(e) {
    var parent = $($(this).parent());

    if (e.keyCode === 8 || e.keyCode === 37) {
      var prev = parent.find('input#' + $(this).data('previous'));

      if (prev.length) {
        $(prev).select();
      }
    } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
      var next = parent.find('input#' + $(this).data('next'));

      if (next.length) {
        $(next).select();
      } else {
        if (parent.data('autosubmit')) {
          parent.submit();
        }
      }
    }
  });
});