JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form accept-charset="UTF-8" action="/login/auth?id=form1" id="form1" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="rdChqhuS0CQ7OOLf4hzKuCqD66mavdwiu5LhlzexZZ4=" /></div>
 <table>
  <tr>
   <td>
   EmailId
   </td>
   <td>
  <input id="email" name="email" type="text" />
   </td>
  </tr>
  <tr>
  <td>
  Password
  </td>
    <td>
 <input id="password" name="password" type="password" />
  </td>
  </tr>
<tr>
<td>




  <input name="commit" type="submit" value="Login" />

</td>

</tr>
</table>
</form>

CSS

rules: {
          
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },

JavaScript

$(document).ready(function () {

$("#form1").validate({
   rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            agree: "required"
        },
        
        messages: {
           
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address",
           
        },
        

})

});