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

$('form input[name="email"]').blur(function () {
    var email = $(this).val();
var re = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm;
if (re.test(email)) {
    $('.msg').hide();
    $('.success').show();
} else {
    alert('sfsdgdgg');
}

});