JSFiddle - React, Tailwind, and code Playground
HTML
<form id="registration" method="POST">
<div class="row rowUsername">
<input type="text" id="username" name="username" value="Pick A Username" class="username">
<div class="status usernameStatus"></div>
</div>
<div class="rowDivide"></div>
<div class="row rowEmail">
<input type="text" id="email" name="email" value="Your E-Mail" class="email">
<div class="status emailStatus"></div>
</div>
<div class="rowDivide"></div>
<div class="row rowPassword">
<input type="text" name="password" value="Password" class="password">
<div class="status"></div>
</div>
<div class="rowDivide"></div>
<div class="row rowLocation">
<input type="text" name="town" value="Town" class="town">
<input type="text" name="postcode" value="Postcode" class="postcode">
<div class="status"></div>
</div>
<div class="registerDivide"></div>
<div class="readTerms">
<input type="checkbox" name="" value=""> I agree to your <a href="terms.php">Terms & Conditions</a>
</div>
<div class="registerDivide"></div>
<div class="submit">
<input type="submit" value="Click Here To Register">
</div>
</form>
CSS
label{display:inline-block;width:75px;}
#errors{color:#FF0000;}
JavaScript
$(document).ready(function(){
$('#email').keyup(check_email);
});
function check_email(){
var email = $('#email').val();
if(email.match('@') < 1 && email.match('(\\.)') < 1){
$('.emailStatus').removeClass("success").addClass("error");
}
else {
$('.emailStatus').removeClass("error").addClass("success");
}
var email = "ok";
}