JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="overlay"></div>
<div id="projectContainer">
    <div id="formContainer">
         <h1>Contact</h1>

        <div class="inputText">
            <div class="textBoxTopBorder"></div>
            <div class="textBoxEditor" id="name" contenteditable="true">Name:</div>
            <input type="hidden" value="Name:">
            <div class="textBoxBottomBorder"></div>
        </div>
        <div class="inputText">
            <div class="textBoxTopBorder"></div>
            <div class="textBoxEditor" id="email" contenteditable="true">Email:</div>
            <input type="hidden" value="Email:">
            <div class="textBoxBottomBorder"></div>
        </div>
        <div class="radioGroup">
            <input type="hidden" id="radioGroupOneCollection" value="">
            <div class="radioButton">
                <div class="radioGraphic"></div>
                <div class="radioLabel">Option 1</div>
                <input type="hidden" value="option one value">
            </div>
            <div class="radioButton">
                <div class="radioGraphic"></div>
                <div class="radioLabel">Option 2</div>
                <input type="hidden" value="option two value">
            </div>
        </div>
        <div id="sendButton">Send</div>
    </div>
</div>

CSS

/*Theme colors #FF4A48, #ccc, #51D55C*/
 @import url(https://fonts.googleapis.com/css?family=Montserrat);
 @import url(https://fonts.googleapis.com/css?family=Raleway:500);
 #projectContainer {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#ddd;
    overflow:auto;
}
#overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#FF4A48;
    z-index:1000;
    -o-transition:opacity .8s ease;
    -moz-transition:opacity .8s ease;
    -webkit-transition:opacity .8s ease;
    -ms-transition:opacity .8s ease;
    transition:opacity .8s ease;
}
#formContainer {
    display:table;
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -o-transition:all 2s ease;
    -moz-transition:all 2s ease;
    -webkit-transition:all 2s ease;
    -ms-transition:all 2s ease;
    transition:all 2s ease;
}
h1 {
    margin:0;
    font-family:'Montserrat', sans-serif;
}
/*text box styles*/
 .textBoxEditor {
    min-width:170px;
    max-width:200px;
    width:10vw;
    background-color:#ccc;
    word-wrap:normal;
    overflow:hidden;
    outline:none;
    padding:5px;
    font-size:16px;
    line-height:16px;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    font-family:'Raleway', sans-serif;
}
.inputText, .inputTextAddedLines {
    display:table;
    position:relative;
    margin-top:10px;
}
.textBoxTopBorder {
    background-color:#FF4A48;
    display:block;
    width:0%;
    height:2px;
    -o-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -webkit-transition:all .4s ease;
    -ms-transition:all .4s ease;
    transition:all .4s ease;
}
.textBoxBottomBorder {
   ...

JavaScript

window.onload = function () {
    //loading fade...
    var overlay = document.getElementById('overlay');
    overlay.style.opacity = '0';
    window.setTimeout(function () {
        overlay.style.display = 'none';
    }, 800);
	
    /*handlers and validation for the text boxes*/
    initializeTextBoxes();
    function initializeTextBoxes() {
        var textBoxes = document.getElementsByClassName('inputText');
        for (var i = 0; i !== textBoxes.length; i++) {
            textBoxes[i].getElementsByClassName('textBoxEditor')[0].onfocus = function () {
                if (this.innerHTML === this.nextElementSibling.value) {
                    this.innerHTML = '';
                    this.previousElementSibling.style.width = '100%';
                    this.nextElementSibling.nextElementSibling.style.width = '100%';
                    this.parentNode.className = 'inputTextAddedLines';
                }
            }
            textBoxes[i].getElementsByClassName('textBoxEditor')[0].onblur = function () {
                if (this.innerHTML === '') {
                    this.innerHTML = this.nextElementSibling.value;
                    this.previousElementSibling.style.width = '0%';
                    this.nextElementSibling.nextElementSibling.style.width = '0%';
                    this.parentNode.className = 'inputText';
                }
            };
        }
    }
    //initilaize handlers for radio buttons
    initializeRadioButtons();
    function initializeRadioButtons(){
    	var radioGroups = document.getElementsByClassName('radioGroup');
        for(var i = 0; i !== radioGroups.length; i++){
         	var radioButtons = radioGroups[i].getElementsByClassName('radioButton');
            for(var j = 0; j !== radioButtons.length; j++){
             	radioButtons[j].onclick = function(){
                	//alert('radio button clicked');
                    var radioButtons = this.parentNode.getElementsByClassName('radioButton');
                   ...