JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="subEmail" onchange="checkFilled();">

CSS

.invalid {
    border:1px solid red
}
.valid {
    border:1px solid green
}

JavaScript

function checkFilled() {
    var inputVal = document.getElementById("subEmail").value;
    if (validateEmail(inputVal)) {
        document.getElementById("subEmail").className = "valid"
    }
    else{
        document.getElementById("subEmail").className = "invalid"
    }
}

checkFilled();

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}