JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" min="5" max="10" value="17">
<input type="number" min="5" max="10" value="8">

<input type="email" value="abc@gmail.com">
<input type="email" value="foo">

CSS

input:invalid {
  border: 2px solid red;
}

input:out-of-range {
  border: 2px solid yellow;
}