JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="swim_split_grid">
    <!--- SPLIT #1 --->
    <div for="split1_min"><span class="split_text">Split 1</span><input type="number" inputmode="decimal" id="laps1" class="laps jump" size="1" maxlength="1" onblur="lapsSum()">
<br>
    <div class="split_time">
    <input type="number" inputmode="decimal" id="split1_min" class="split jump" size="1" maxlength="1" name="split1_min" onchange="split_calc1()">
    <span>:</span><input type="number" inputmode="decimal" id="split1_sec" class="split jump" size="2" maxlength="2" name="split1_sec" step="1" value="" onchange="split_calc1()">
 
    </div>
    <div class="split_lap_ave">Lap Ave:  <input class="split_laps" id="split1_ave" name="split1_ave">
    </div>
    </div>
    <!---  SPLIT #2  --->
    <div for="split2_min"><span class="split_text">Split 2</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="laps2" class="laps jump" size="1" maxlength="1" onblur="lapsSum()">
<br>
    <div class="split_time">
    <input type="number" inputmode="decimal" id="split2_min" class="split jump" size="1" maxlength="1" name="split2_min" onchange="split_calc2()">

    <span>:</span><input type="number" inputmode="decimal" id="split2_sec" class="split jump" size="2" maxlength="2" name="split2_sec" step="1" value="" onchange="split_calc2()">
</div>
    <div class="split_lap_ave">Lap Ave:  <input class="split_laps" id="split2_ave" name="split2_ave">
    </div>
    </div>
    <!---  SPLIT #3  --->
    <div for="split3_min"><span class="split_text">Split 3</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="laps3" class="laps jump" size="1" maxlength="1" onblur="lapsSum()">
<br>
    <div class="split_time">
    <input type="number" inputmode="decimal" id="split3_min" class="split jump" size="1" maxlength="1" name="split3_min" onchange="split_calc3()">

    <span>:</span><input type="number" inputmode="decimal" id="split3_sec" class="split jump" size="2" maxlength="2" name="split3_sec" step="1" value=""...

CSS

.laps::before {
	content: "laps";
}