JSFiddle - React, Tailwind, and code Playground

by Rui Leite

HTML

<input pattern="^a$" type="text" value="b" />

CSS

.invalido { border: 1px solid red; color: red; }

JavaScript

$("input").keyup(function(){
    if(this.validity.valid){
        this.className = "valido";
    } else {
        this.className = "invalido";
    }
});