JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>


<form action="#" method="post" id="validate">
  <ul class="form-style-1">

    <li>
      <input type="text" required name="first_name" id="first_name" class="field-divided" />
      <label alt="First name" placeholder="First name"></label>
    </li>
    <li>
      <input type="text" required name="last_name" id="last_name" class="field-divided" />
      <label alt="Last name" placeholder="Last name"></label>
    </li>

    <input type="submit" value="Send" />
    <input type="reset" id="cancel" value="Reset" />
  </ul>
</form>

CSS

body {
  margin-left: 30px;
}

.form-style-1 {
  margin: 10px auto;
  max-width: 720px;
  padding: 20px 0px 10px 0px;
  font: 13px"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.form-style-1 li {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}

.form-style-1 input[type=text],
textarea,
select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #efeeee;
  background: #efeeee;
  padding: 14px;
  margin: 0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  font-size: 14px;
}

.form-style-1 input[type=text]:focus,
.form-style-1 select:focus {
  border: 1px solid #00bafa;
  background: #fff;
  font-size: 14px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.form-style-1 .field-long {
  width: 100%;
}

.form-style-1 input[type=submit],
.form-style-1 input[type=reset],
.form-style-1 input[type=button] {
  background: #ccc;
  margin: 15px 6px 0 0;
  padding: 10px 15px 10px 15px;
  border: none;
  color: #fff;
  font: 14px"Lucida Sans Unicode", "Lucida Grande", sans-serif;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.form-style-1 input[type=submit]:hover,
.form-style-1 input[type=reset]:hover,
.form-style-1 input[type=button]:hover {
  background: #aaa;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.error {
  background: #d78989 !important;
  -webkit-transition: all 0.30s ease-in-out !important;
 ...

JavaScript

$(document).ready(function() {

  $('#validate').validate({

    errorPlacement: function() {
      return false;
    },


    rules: {
      first_name: {
        required: true,
      },
      last_name: {
        required: true
      },


    }
  });

});

$("#cancel").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});