JSFiddle - React, Tailwind, and code Playground

HTML

<form onsubmit="alert('Submitted');">
    <input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>

CSS

#uid:valid {
    color: green;
}
#uid:invalid {
    color: red;
}