JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border">
    <input type="text" class="line" maxlength="1" tabindex="1" />
    <input type="text" class="line" maxlength="1" tabindex="2" />
    <input type="text" class="line" maxlength="1" tabindex="3" />
    <input type="text" class="line" maxlength="1" tabindex="4" />
    <input type="text" class="line" maxlength="1" tabindex="5" />
    <input type="text" class="line" maxlength="1" tabindex="6" />
    <input type="text" class="line" maxlength="1" tabindex="7" />
    <input type="text" class="line" maxlength="1" tabindex="8" />
</div>
<input type="submit" class="submit" />

CSS

.border {
    margin: 0 0 20px;
    padding:0;
    overflow: hidden;
}
input.line {
    float:left;
    width:32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #bbb;
    margin: 0 -1px 0 0;
    font-size: 20px;
    text-align: center;
}
.submit {
    margin: 0;
    padding: 0;
}

JavaScript

$( ".line" ).keypress(function() {
  $(this).next().focus();
});