JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contactForm" class="contactForm">
	<div id="formHeader" class="formHeader">
		<h1 id="message">Contact Me</h1>
	</div>
	<div id="formBody" class="formBody">
		<form action="" method="POST" name="contactForm">
			<div class="inputContainer">
				<label for="userName">
					<i class="fa fa-lg fa-fw fa-user"></i>
				</label>
				<input name="username1" id="userName" type="text" placeholder="John Smith">
			</div>
			<div class="inputContainer">
				<label for="userEmail">
					<i class="fa fa-lg fa-fw fa-envelope"></i>
				</label>
				<input name="email" id="userEmail" type="email" placeholder="jsmith@domain.com">
			</div>
			<div class="inputContainer">
				<textarea name="password2" id="userMessage" rows="10" placeholder="Enter your message"></textarea>
			</div>
			<input id="submitBtn" class="submitBtn" type="submit" value="Send">
		</form>
	</div>
</div>
<center><p><em>NOTE: This form is for presentation only. Any form data entered is not submitted</em></p></center>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900|Montserrat:400,700,900|Open+Sans:400,700,900|Raleway:400,700,900);
/*-----------------------------------//
//  MIXINS
//-----------------------------------*/
/*-----------------------------------//
//  D.R.Y. CLASSES
//-----------------------------------*/
/*Text Aligns*/
.textLeft {
  text-align: left;
}
.textRight {
  text-align: right;
}
.textCenter {
  text-align: center;
}

/*-----------------------------------//
//  GENERAL
//-----------------------------------*/
body {
  font: 14px/1.5em "Open Sans";
  background: #F0F1FA;
}

a {
  text-decoration: none;
  color: #E54B4B;
}

p em {
  background: #f2f2f2;
  color: #87878f;
  padding: 0 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat";
}

hr {
  margin: 1.5em 0;
}

.hide {
  display: none;
}

/*-----------------------------------//
//  TEMPLATE STYLES
//-----------------------------------*/
/* Buttons and Inputs */
textarea,
button,
a.btn,
select,
input[type="text"],
input[type="submit"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button {
  font-family: inherit !important;
  font-size: 13px;
  border: 1px solid #B0B0BA;
  box-sizing: border-box;
  padding: 5px;
}

a.btn,
button,
input[type="submit"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button {
  background: transparent;
  display: inline-block;
  padding: 6px 10px;
  color: inherit;
  font-weight: bold !important;
  font-family: Montserrat;
  text-decoration: none;
  text-transform: uppercase;
}

/* Row */
.row {
  margin-bottom: 1.5%;
  overflow: hidden;
}
.row:last-child {
  margin: 0;
}

@media screen and (min-width: 480px) {
  .hlf,
  .trd,
  .fth {
    float: left;
    margin-right: 1.5%;
  }
  .hlf:last-child,
  .trd:last-child,
  .fth:last-child {
    margin: 0;
    float: right;
  }

  .hlf {
    width: 49.25%;
  }

  .trd {
    width:...

JavaScript

(function() {
	"use strict";
	var //GLOBAL VARIABLES
	input,
			container,
			//CSS CLASSES
			classSuccess = "success",
			classError = "error",
			//FORM VALIDATOR
			formValidator = {
				init: function() {
					this.cacheDom();
					this.bindEvents();
				},
				cacheDom: function() {
					//MAIN PARENT ELEMENT
					this.contactForm = document.getElementById("contactForm");
					//MAIN FORM ELEMENTS
					this.formHeader = document.querySelector("#formHeader h1");
					this.formBody = document.getElementById("formBody");
					this.inputContainer = document.getElementsByClassName("inputContainer");
					//USER INPUT ELEMENTS
					//INPUT FIELDS
					this.fields = {
						userName: document.getElementById("userName"),
						userEmail: document.getElementById("userEmail"),
						userMessage: document.getElementById("userMessage")
					};
					this.submitBtn = document.getElementById("submitBtn");
				},
				bindEvents: function() {
					var i;
					//RUN RULES ON SUBMIT BUTTON CLICK
					this.submitBtn.onclick = this.runRules.bind(this);
					//BIND EVENTS TO EACH INPUT FIELD
					for (i in this.fields) {
						if (this.fields.hasOwnProperty(i)) {
							//VARIABLES
							input = this.fields[i];
							container = input.parentElement;
							//RUN RULES WHEN INPUT HAS FOCUS
							input.onfocus = this.runRules.bind(this);
							//RESET ERRORS WHEN CONTAINER IS CLICKED
							container.onclick = this.resetErrors.bind(this, input);
						}
					}
				},
				runRules: function(evnt) {
					var target = evnt.target,
							type = evnt.type;
					//IF EVENT ON SUBMIT BUTTON
					if (target === this.submitBtn) {
						//PREVENT FORM SUBMITTION
						this.preventDefault(evnt);
						//IF INPUT HAS FOCUS
					} else if (type === "focus") {
						//RESET CLASSLIST
						this.resetClassList(target.parentElement);
						//RESET ERRORS
						this.resetErrors(target);
						return false;
					}
					//RESET CLASSLIST
					this.resetClassList();
					//CHECK...