JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="wrapper">
<input type="text" id="day" maxlength="2">/<input type="text" id="month" maxlength="2">/<input type="text" id="year" maxlength="4">
</div>
CSS
input {
font-size: 26px;
}
#wrapper {
font-size:26px;
background:#fff;
display: inline-block;
border:1px solid #000;
}
#day,#month,#year {
width:50px;
border:0;
text-align: center;
outline: 0;
}
#year {
width: 100px;
}
JavaScript
$('#wrapper > input').keydown(function(e){
if(e.keyCode == 8 && !this.value.length){
$(this).prev('input').focus();
}
if(this.value.length == 2){
$(this).next('input').focus();
return true;
}
});