JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<form id="form">
  <div id="contact-div-1">
    <input type="text" placeholder="First Name" name="FNAME" class="field validation" id="mce-FNAME">
        <span>
    Please Enter Your First Name
  </span>
  </div>
  
  <div id="contact-div-2">
    <input  type="text" placeholder="Last Name" name="LNAME" class="field validation" id="mce-LNAME">
        <span>
    Please Enter Your Last Name
  </span>
  </div>
  
  <div id="contact-div-3">
    <input type="text" placeholder="E-mail Address" name="EMAIL" class="field validation" id="mce-EMAIL">
        <span>
    Please Enter A Valid E-mail Address
  </span>
  </div>
  
</form>

JavaScript

$("#form span").hide();
$("input").click(function(evt){
    evt.stopPropagation();
}).focus(function(){
    $(this).next('span').fadeIn("slow");
}).blur(function(){
    $(this).next('span').fadeOut("slow");
}); //end blur