JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="swim_split_grid">
<div for="split1_min" class="box"><span>Split 1</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_min" class="split" name="split1_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_sec" class="split" name="split1_sec" step="1" value="0">
</div>
<div for="split2_min" class="box"><span>Split 2</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_min" class="split" name="split2_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_sec" class="split" name="split2_sec" step="1" value="0">
</div>
<div for="split3_min" class="box"><span>Split 3</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_min" class="split" name="split3_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_sec" class="split" name="split3_sec" step="1" value="0">
</div>
<div for="split4_min" class="box"><span>Split 4</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_min" class="split" name="split4_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_sec" class="split" name="split4_sec" step="1" value="0">
</div>
<div for="split5_min" class="box"><span>Split 5</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split5_min" class="split" name="split5_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split5_sec" class="split" name="split5_sec" step="1" value="0">
</div>
<div for="split6_min" class="box"><span>Split 6</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split6_min" class="split" name="split6_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split6_sec" class="split" name="split6_sec" step="1"...

CSS

#swim_split_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2px;
    grid-row-gap: 0px;
    }
input {width: 25px; text-align: right; padding: 1px;}

JavaScript

for (i = 1; i <= 10; i++) {
    var min = getElementById('split+i');

    document.body.appendChild(min);
}