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" />
        <label for="name">Name</label>
    </fieldset>
    <fieldset>
        <input type="text" name="email" class="input--text" />
        <label for="email">Email</label>
    </fieldset>
    <fieldset>
        <button type="submit" class="submit">Submit</button>
    </fieldset>
</form>

CSS

* {
    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.no-after:after {
    content: '';
    background: none;
    display: none;
}

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

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

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

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

.form--error:after {
    content: ' ';
    display: block;
    background: url('https://cdn4.iconfinder.com/data/icons/simplicio/128x128/notification_error.png');
    width: 20px;
    height: 20px;
    position: absolute;
    top: 23px;
    right: 20px;
}

.form--pass label{
    color: #428600;
}

.form--pass:after {
    content: ' ';
    display: block;
    background: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/256/Alarm-Tick-icon.png');
    width: 20px;
    height: 20px;
    position: absolute;
    top: 23px;
    right: 20px;
}
fieldset label:nth-of-type(even)
{display:none;}

JavaScript

var Form = {
    
    init: function(){
        Form.textInputted();
        Form.validation();
    },
    
    textInputted: function() {
        var Input = $('.input--text');
        Input.on('keyup blur', function(e) {
            if (!$(this).val() == "") {
                //Add Active Input Class
                $(this).next().addClass('input--active');
            } else {
                //Remove Active Input Class
                $(this).next().removeClass('input--active');
            }
        });
    },
    
    validation: function() {
        $('form').validate({
            rules: {
                "email": {
                    required: true,
                    email: true
                },
                "name": {
                    required: true
                }
            }
      });
   }
 
}
$(function(){
    Form.init();
});