JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<form>
  
    <div style="position:relative">
        <input id="firstName"
            name="firstName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onfocus="clearAlert( this );"
            onblur="showHint( this ); requiredStatus( this );"
            />
        <span id="firstNameHint"
            class="hintSpan"
            onclick="focusInput( this );">
                First Name
        </span>
    </div>
    <span id="firstNameAlert"
        class="alertSpan">
    </span>

    
    <div style="position:relative">
        <input id="lastName"
            name="lastName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onfocus="clearAlert( this );"
            onblur="showHint( this ); requiredStatus( this );"
            />
        <span id="lastNameHint"
            class="hintSpan"
            onclick="focusInput( this );">
                Last Name
        </span>
    </div>
    <span id="lastNameAlert"
        class="alertSpan">
    </span>
    
    <div style="position:relative">
        <input id="email"
            name="email"
            class="userInput"
            type="email"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this );"
            onfocus="clearAlert( this );"
            onblur="showHint( this ); emailStatus( this );"
            />
        <span id="emailHint"
            class="hintSpan"
            onclick="focusInput( this );">
                Email
        </span>
    </div>
    <span id="emailAlert"
        class="alertSpan">
    </span>
    
    <div style="position:relative">
        <input id="phoneNumber"
            name="phoneNumber"
            class="userInput"
            type="number"
           ...

CSS

body
{
    font-family: sans-serif;
    margin: 5px;
    font-size: 14px;
}

.hintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 9px;
    color: #999;
    left: 10px;
    display: block;
}

.pocHintSpan
{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 1px;
    color: #999;
    left: 10px;
    display: block;
}

.alertSpan
{
    font-family: sans-serif;
    font-size: 10px;
    color: rgb(191, 0, 0);
    display: none;
    margin: 5px;
    margin-top: 0px;
}

.userInput
{
    box-shadow: none;
    border: 1px solid #DDD;
}

input, textarea
{
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
    outline: none;
    padding: 3px;
    margin: 5px;
}

input:focus, textarea:focus
{
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

input:disabled, textarea:disabled
{
    background-color: #FFF;
    color: #000;
}

.invalidInput
{
    border: 1px solid rgba(191, 0, 0, 1);
}

.pwShort
{
    background-color: rgb(191, 0, 0);
    width: 35px;
}
.pwSimple
{
    background-color: rgb(191, 0, 0);
    width: 70px;
}
.pwGood
{
    background-color: rgb(0, 63, 191);
    width: 105px;
}
.pwStrong
{
    background-color: rgb(0, 191, 63);
    width: 140px;
}

JavaScript

var extraPOC = 1;
function addPOC()
{
    //sets max number of allowed extra POC's
    //currently set to 5
    if(extraPOC > 5)
    {
        alert("Only 5 extra POC's are allowed");
         return;   
    }
    
    //get the old div and make a new smaller div
    var pocDiv = document.getElementById('poc');
    var newDiv = document.createElement('div');
    
    ///////////////////////////////////////////////////////
    //create the span to contain the text box for the title
    var titleSpan = document.createElement('span');
    titleSpan.setAttribute('style', 'position:relative');

    //make the text box
    var titleInput = document.createElement('input');
    titleInput.setAttribute('id', 'POC' + extraPOC);
    titleInput.setAttribute('name', 'POC' + extraPOC);
    titleInput.setAttribute('class', 'userInput');
    titleInput.setAttribute('type', 'text');
    titleInput.setAttribute('size', '22');
    titleInput.setAttribute('maxlength', '22');
    titleInput.setAttribute('value', '');
    titleInput.setAttribute('onkeydown', 'hideHint( this );');
    titleInput.setAttribute('onblur', 'showHint( this );');
    
    //make the hint span
    var inputHint= document.createElement('span');
    inputHint.setAttribute('id', 'POC' + extraPOC + 'Hint'); 
    inputHint.setAttribute('class', 'pocHintSpan');
    inputHint.setAttribute('onclick', 'focusInput( this );');
    inputHint.innerHTML = "Extra POC #" + extraPOC + " Title";
    
    //package the hint span and text box into the bigger span
    titleSpan.appendChild(titleInput);
    titleSpan.appendChild(inputHint);
    
    //////////////////////////////////////////////////////
    //create the span to contain the text box for the name
    var nameSpan = document.createElement('span');
    nameSpan.setAttribute('style', 'position:relative');

    //make the text box
    var nameInput = document.createElement('input');
    nameInput.setAttribute('id', 'POC' + extraPOC + 'Name');
   ...