JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<body>
    <div id="formContainer">
        <div class="formHeader">
             <h2>Get in touch</h2>

        </div>
        <form method="post" action="#" class="formContact">
            <ul>
                <li>
                    <label class="formLabel" for="firstName">First Name<span class="formHelp">* Must have more than 3 chars</span><span class="formError">This field is required</span><span class="formComp">Complete</span>

                    </label>
                    <input id="firstName" class="required" name="firstName" value="First Name" />
                </li>
                <li>
                    <label class="formLabel">Surname<span class="formHelp">* Must have more than 3 chars</span>

                    </label>
                    <input id ="surname" class="voluntary" name="surnameName" value="Surname" />
                </li>
                <li>
                    <label class="formLabel">Contact Email<span class="formHelp">* Prefered contact email</span>

                    </label>
                    <input class="required" name="email" type="email" placeholder="Contact Email" />
                </li>
                <li>
                    <label class="formLabel">Message<span class="formHelp">* Max 1000 chars</span>

                    </label>
                    <textarea class="required" name="message" placeholder="Write your message here" maxlength="1000"></textarea>
                </li>
            </ul>
        </form>
        <div class="formFooter">
            <div class="formFootCol1">
                <input id="submit" name="submit" type="submit" value="Submit" />
            </div>
            <div class="formFootCol2">
                <p class="formComments">Once Complete plese click Submit</p>
                <p class="formComments">Fields mark with a '*' are manditory</p>
            </div>
        </div>
    </div>
</body>

CSS

/* 
height:100% implies the element is going to have the 100% height of its parent container.

height:auto means, the element will have flexible height i.e. its height will depend upon the height of children elements of it 

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
*/
 body {
    width:960px;
    background-color: #efefef;
}
#formContainer {
    height:700px;
    width:480px;
    margin:0 auto;
    background-color:white;
}
.formHeader {
    height:100%;
    max-height:47px;
    width:100%;
    max-width:460px;
    background-color: #d5d5d5;
    padding:10px;
    margin:0;
}
#formContainer h2 {
    padding:0;
    margin:0;
}
form.formContact {
    width:100%;
    max-width:400px;
    height:auto;
    padding:10px;
    margin:0 auto;
    background-color: #efefef;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    margin:0;
    padding:0;
}
span {
    opacity : 0;
    filter : alpha(opacity=0);
}
span.formHelp, span.formError, span.formComp {
    font-size:0.75em;
    font-style:italic;
    padding-left:10px;
}
span.formHelp {
    color:blue;
}
span.formError {
    color:red;
}
span.formComp {
    color:green;
}
label.formLabel {
    display:block;
    height:25px;
    width:100%;
    max-width:400px;
    padding-top:10px;
    font-size:1em;
    margin:0 auto;
}
ul li:nth-child(1) label {
    padding-top:0px
}
label.formLabel, input, textarea {
    letter-spacing:2px;
}
input, textarea {
    width:100%;
    max-width:398px;
    padding:0;
    margin:0 auto;
    text-indent:5px;
    border:1px solid #d5d5d5;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
textarea {
    resize:none;
    height:324px;
}
input {
    height:27px;
}
.required {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.3);
    /* background-color:#FCC0B8; 
       opacity : 0.2;
       filter : alpha(opacity=20); */
}
.voluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.3);
}
.complete {
   ...

JavaScript

$(document).ready(function () {});

$(function () {
    $('input, textarea').on('focus blur', function () {
        console.log(this);
        console.log(focusedId + ' focusedId');

            var input = $(this).attr('id');
        alert(input + ' id');
        var defaultVal = $(this).val();
        alert(defaultVal + ' valueStart');
        
        var userVal = 
    });
});


        if ($(this).hasClass('required')) {
            $(this).removeClass('required');
            $(this).addClass('cursorFocusRequired');
        } else {
            $(this).removeClass('voluntary');
            $(this).addClass('cursorFocusVoluntary');
        } if ($(this).hasClass('cursorFocusRequired')) {
            $(this).removeClass('cursorFocusRequired');
            $(this).addClass('required');
        } else {
            $(this).removeClass('cursorFocusVoluntary');
            $(this).addClass('voluntary');
        }