JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id='nav'>
    <label for='speed'>&nbsp;Speed
        <br />
        <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' />
    </label>
    <br />
    <label for='Iron'>&nbsp;Iron
        <br />
        <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Ice'>&nbsp;Ice
        <br />
        <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Mass'>&nbsp;Mass
        <br />
        <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Diameter'>&nbsp;Diameter
        <br />
        <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <p id='spacer'>&nbsp;</p>
    <p id='enterSign' onclick='saveitem()'>Press Enter</p>
    <button id='btnReset' onclick='resetPage()'>Reset</button>
</div>

CSS

:in-range {
    border-color: green;
}
:out-of-range {
    border-color: red;
}