JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
<tbody>
    <tr class="tabel_header">
	 <th width="10%" align="center"><strong> Email:</strong></th>
	 <th width="7%" align="center"><strong> Username:</strong></th>		
	</tr>
    <tr data-row-no="1" height="35">
			<td><div id="email" style="width: 100%; height: 100%;" contenteditable="true" > admin@dracus.co</div></td>
			<td><div style="width: 100%; height: 100%;" contenteditable="true"> Admin</div></td>
        </tr>
</tbody></table>

JavaScript

$(document).ready(function(){
  $("div").blur(function(){
   // alert("This input field has lost its focus.");
     var email = $( "div#email" ).text()
	
	var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
	//var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;
  
if (!emailPattern.test(email)){
	  alert("Invalid email address.");
	  $(this).css('color', 'red');
	  //$(this).preventDefault();
	 // $(this).focus;
}
else {
  alert("Valid email address.");
}


  });
});