JSFiddle - React, Tailwind, and code Playground

by Riesling

HTML

<textarea name="test" pattern="[a-z]{1,30}(,[a-z]{1,30})*" id="test"></textarea>

CSS

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

JavaScript

jQuery('#test').on('keyup', function() {
   jQuery(this).parent().append('<p>' + this.checkValidity() + ' ' + this.validity.patternMismatch + '</p>'); 
});