JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.highlighted{
   
    border-color: red;
}

.nohighlight{
   
    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").switchClass("nohighlight", "highlighted", 1000);
    }
    
}