JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-container">
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
</div>

CSS

.main-container{
    border: 2px solid #000;
    width:180px;
}
.inner-container{
    border: 1px solid #000;
    width:20px;
}
.input-style{
    width:20px;
    text-align:center;
    border:0px;
}