JSFiddle - React, Tailwind, and code Playground

HTML

<input id="mail1" type="text" MaxLength="35" />
<input id="button" type="button" value="click" onclick="validate(this);" />

CSS

.highlighted{
   
    border-color: red;
}

#mail1 {
   
    border-color : "";
}

JavaScript

function validate(obj){
    alert("hai");
   var str = obj.value;
    var exp=/^[a-zA-Z0-9+\.]+@(([a-zA-Z]+\.)+[a-zA-Z]{2,3})$/;
    if (!exp.test(str)) {
        alert("invalid");
        $("#mail1").addClass("highlighted");
        setTimeout(
            function() { 
                $("#mail1").removeClass('highlighted'); 
            },
            2000
        );
    }
    
}