JSFiddle - React, Tailwind, and code Playground

by EveGeen

HTML

<form>
    <input type="radio" name="machine-type" value="100" checked="checked">100<input type="radio" name="machine-type" value="200">200<input type="radio" name="machine-type" value="300">300<br>
    
    <input type='number' id='box1' value=' ' class="defaultInput keyboard" placeholder="X (keyboard)" />
    <input type='number' id='box2' value=' ' class="defaultInput" readonly="readonly" placeholder="Y (radio)" />
    <input type='number' id='box3' value=' ' class="defaultInput" readonly="readonly" placeholder="Z (radio)" />
    <br>
    <input type='number' id='box4' value=' ' class="defaultInput sum" readonly="readonly" placeholder="SUM (Multiply X * Y * Z)" />
    <br><br><br>
    <input type='number' id='box5' value=' ' class="defaultInput" readonly="readonly" placeholder="A (takes value Y)" />
    <input type='number' id='box6' value=' ' class="defaultInput keyboard" placeholder="B (keyboard)" />
    <input type='number' id='box7' value=' ' class="defaultInput keyboard" placeholder="C (input B + 5%)" /><br>
    <input type='number' id='box8' value=' ' class="defaultInput" readonly="readonly" placeholder="D (input F / Y)" />
    <input type='number' id='box9' value=' ' class="defaultInput" readonly="readonly" placeholder="E (Multiply C * Y)" />
    <input type='number' id='box10' value=' ' class="defaultInput keyboard" placeholder="F (keyboard)" />
    <br><br><br>
    <input type='number' id='box11' value=' ' class="defaultInput" readonly="readonly" placeholder="G (subtraction I - H)" />
    <input type='number' id='box12' value=' ' class="defaultInput" readonly="readonly" placeholder="H (takes value B)" />
    <input type='number' id='box13' value=' ' class="defaultInput" readonly="readonly" placeholder="I (takes value C)" /><br>
    <input type='number' id='box14' value=' ' class="defaultInput" readonly="readonly" placeholder="J (subtraction L - K)" />
    <input type='number' id='box15' value=' ' class="defaultInput" readonly="readonly" placeholder="K...

CSS

.defaultInput {
     width: 200px;
     height:25px;
     padding: 5px;
     margin: 5px;
    }
.keyboard {
 border:1px solid orange;
}
.sum {
    width: 655px;
}