JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<p><label>Name: <input required /> *required</label></p>
<p><label>Age: <input /></label></p>

CSS

:required {
    background-color: lightyellow;
}
.touched:required:invalid {
    background-color: pink;
}
.touched:required {
    background-color:white;
}

JavaScript

$(':required').one('blur keydown', function() {
    $(this).addClass('touched');
});