JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input onblur="onEmailInputBlur(event)" placeholder="E-mail address">

CSS

input.is-invalid {
  border: 1px solid red;
  outline: none;
}

JavaScript

var invalidClass = 'is-invalid';

window.onEmailInputBlur = function(event) {
	var email = event.target.value,
  		elClassList = event.target.classList;
  
  elClassList.remove(invalidClass);
  
  if (!isEmailValid(email)) {
  	elClassList.add(invalidClass);
  }
}

function isEmailValid(email) {
  var validEmailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return validEmailRegex.test(email);
}