JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<form>
    <fieldset>
        <input type="text" name="name" class="input--text" required />
        <label for="name" class="input-label">Name</label>
    </fieldset>
    <fieldset>
        <input type="text" name="email" class="input--text" required />
        <label for="email" class="input-label">Email</label>
    </fieldset>
    <a href="#" class="submit-form submit--disabled">Submit</a>
</form>

CSS

/*-- DO NOT REMOVE THIS - This is for an enhanced grid system and makes for easier sizing options --*/
*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
/*----------------------------------*/
body {
  background:#eee;
}

form {
  background:#fff;
  padding:2em;
  width: 100%;
  margin: 10px auto;
  border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

fieldset {
  border:none;
  position:relative;
  font-family:arial,sans-serif;
}

fieldset:after{
    content:'ok';
    display:block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    opacity:0;
    transition: opacity 0.3s linear;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition:  opacity 0.3s linear;
    -0-transition:  opacity 0.3s linear;
}

.input--text {
    border: 1px solid #cccccc;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #666666;
    padding: 25px 10px 5px 10px;
    width: 100%;
    height: 50px;
    border-radius: 3px;
}

.input--text:focus {
  outline:none;
}

.input-label,
.input-label--error {
  display:block;
  cursor:text;
  color:#777;
  transition: .15s ease-out top;
  -webkit-transition: .15s ease-out top;
  -moz-transition:  .15s ease-out top;
  -0-transition:  .15s ease-out top;
  position:absolute;
  top: 35px;
  left: 23px;   
  color: #666;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif; 
}

.input--text:focus + .input-label,
.input-label.input--active,
.input-label--error{
  top: 15px;
  left: 23px;
  font-size: .7em;
  color: #007C92;
  transition: .15s ease-out top;
  -webkit-transition: .15s ease-out top;
  -moz-transition:  .15s ease-out top;
  -0-transition:  .15s ease-out top;
  font-weight: bold;
}

.form--error .input-label--error{
    color: #E60000;
}

.form--error:after {
    content:'error';
   ...

JavaScript

var Form = {
    
    init: function(){
        Form.dynamicInputted();
        Form.textInputted();
        Form.validation();
    },
    dynamicInputted: function() {
        var Input = $('.input--text');
        Input.each(function(value){
            if ($.trim($(this).val()) !== "") {
                //Add Active Input Class
                $(this).next().addClass('input--active');
            }        
        });
    },
    textInputted: function() {
        var Input = $('.input--text');
        Input.on('blur', function() {
            if ($.trim($(this).val()) !== "") {
                //Add Active Input Class
                $(this).next().addClass('input--active');
            } else {
                //Remove Active Input Class
                $(this).next().removeClass('input--active');
            }
        });
    },
    validation: function() {
        //Custom method to check for valid emails 
        $.validator.addMethod("validEmail", function(value, element){
            var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
            if(pattern.test(value)) {
                return true;
            } else {
                return false;
            };
        }, 'Please enter a valid email address');
        //Form Field Validation
        $('form').validate({
            //Define validation rules
            rules: {
                "name": {
                    required: true
                },
                "email": {
                    validEmail: true,
                    required: true
                }
            },
            //Add Error Class To Fieldset if field invalid
            highlight: function(element) {
                var formInput = $(element);
                formInput.parent().removeClass('form--valid').addClass('form--error');
                formInput.next('.input-label').hide();
            },
            //Add Valid Class To Fieldset if field valid
            unhighlight:...