JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<form>
<p>
<input type="text" required pattern="^\d{0,10}$" maxlength="10">
</p>
</form>

CSS

input:required:invalid {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border : 1px solid black;
}