JSFiddle - React, Tailwind, and code Playground

by ProjectSoft

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="username" id="userName" type="text" placeholder="John Smith">
			</div>
			<div class="inputContainer">
				<textarea name="usermessage" 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");
				this.form = document.getElementsByName("contactForm")[0];
				//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"),
					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 FIELDS
				this.checkFields();
			},
			preventDefault:...