JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<div id= "content_box">
<h1>Here is the contact form you are looking for...</h1>
<br />
<form action="#" method="post" id="contactform">
 <label for="name">Your Name:</label>
 <input name="name" type="text" value="" class="commentform-input" id="name"/>
<br />
<br />

<label for="email">Your Email:</label>
<input name="email" type="text" value="" class="commentform-input" id="email"/>
<br />
<br />
<label for="message">Message:</label>
<textarea name="message" class="commentform-input" cols="70" rows="10" id="message"></textarea>
<br />
<input name="Submit" type="submit" value="Submit" class="input-submit"/></form>
</div><!-- END OF CONTENT BOX -->

CSS

input.error_class, textarea.error_class{
  background:#F7CBCA;
  border-left: 3px solid #a82222;
}
label.error { font-weight:bold; float: none; color: #a82222; padding-left: .5em; vertical-align: top;   font-size: 17px; font-family: "Times New Roman",times,serif;}
label.valid { font-weight:bold; float: none; color: #287211; padding-left: .5em; vertical-align: top;   font-size: 17px; font-family: "Times New Roman",times,serif;}

JavaScript

//array of success messages and randomly select one
   var messages = ["Good!", "Great!", "Awesome!", "Super!", "Nice!","Yay!", "Success!", "Ok!", "Perfect!","Sweet!" ];
function successMessage() {
return messages[Math.floor(Math.random() * messages.length)];
}

    //start form validation code
$("#contactform").validate({
      debug: true,
      rules: {
          name: "required",
          email: {
              required: true,
      email: true
      },
          message:{
     required:true,
     minlength: 6
     },
  },
        messages: {
           name: "Please enter your name.",
     email: {
    required: "Please enter your e-mail.",
    email: "Please enter a valid e-mail."
    },     
     message:{
     required: "Please enter a message.",
     minlength: "Please enter at least 6 characters."
      }
  },
       errorPlacement: function(label, element) {
        // position error label after generated textarea
        if (element.is("textarea")) {
          label.insertAfter(element),
          label.css({'padding-left': '105px'})
        }
        else {
          label.insertAfter(element)
        }
      },
         
           success: function(label) {
             label.not(".valid").addClass("valid").text(successMessage());
           
            }
   
      }); //end form validate code