JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">
    <div class="row requiredRow">
        <label for="email" id="email-ariaLabel">Your email address:</label>
        <input id="email" name="email" type="email" class="required" title="This is a required field" /> <span class="msg error">Not a valid email address</span>
 <span class="msg success">A valid email address!</span>

    </div>
</form>

CSS

.msg {
    display: none;
}
.error {
    color: red;
}
.success {
    color: green;
}

JavaScript

$('#email').on(keyup, function () {
    var email = $(this).val();
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
if (re.test(email)) {
    $('#email').addClass('error');
} else {
    $('#email').removeClass('error');
    $('#email').addClass('success');
}

});