JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<form name="signup-form" autocomplete="off">
    <label for="firstname">Firstname:</label>
    <input id="firstname" name="firstname" type="text" title="Please enter your firstname" placeholder="Jonny" autofocus required />
    <label for="surname">Surname:</label>
    <input id="surname" name="surname" type="text" title="Please enter your surname" placeholder="Schnittger" required />
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" title="Please enter your email address" placeholder="[email protected]" required />
    <label for="website">Website:</label>
    <input id="website" name="website" type="url" title="Please enter the url to your website (optional)" placeholder="http://schnittger.me" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" title="Please enter a password, it must contain at least 1 lowercase and 1 uppercase character and be at least 6 characters in length" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" placeholder="******" required />
    <label for="checkbox">Is this checked?:</label>
    <input id="checkbox" name="checkbox" type="checkbox" checked />
    <label for="checkbox">Is this checked?:</label>
    <select id="options" name="options">
        <option value="opt-1">Option 1</option>
        <option value="opt-2">Option 2</option>
        <option value="opt-3">Option 3</option>
        <option value="opt-4">Option 4</option>
    </select>
    <input type="submit" value="Signup!" />
</form>

<h1>Signup Form </h1>

<form name="form1" method="post" action="" autocomplete="false">
    <p>
        <label for="fname">First Name <span class="star">*</span>
        </label>
        <input required type="text" name="fname" id="fname">
    </p>
    <p>
        <label for="lname">Last Name <span class="star">*</span>
        </label>
        <input required type="text"...

CSS

form {
    width: 400px;
    margin: 0px auto;
}
input {
    display: block;
}
input:not([type=submit]):invalid {
    background-color: #ffdddd;
}
input:not([type=submit]):valid {
    background-color: #ddffdd;
}
input:not([type=submit]):invalid:required {
    background: #ffdddd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):valid:required {
    background: #ddffdd url('http://www.developerdrive.com/wp-content/uploads/2013/08/asterisk1.png') no-repeat right top;
}
input:not([type=submit]):optional {
    background-color: #add1ef;
}

JavaScript

(function ($) {
    $.fn.formCache = function (options) {

        var settings = $.extend({}, $.fn.formCache.defaults, options);

        function saveField() {
            var input = this,
                $input = $(input),
                key = $input.parents('form:first').attr('name'),
                data = JSON.parse(localStorage[key]);

            if (input.type === 'radio' || input.type === 'checkbox') {
                data[input.name] = $input.is(':checked');
            } else {
                data[input.name] = input.value;
            }

            localStorage[key] = JSON.stringify(data);
            console.log('saved ' + localStorage[key]);
        }

        return this.each(function () {
            var element = $(this);

            if (Modernizr.localstorage) {
                var key = element.attr('name'),
                    data = false;

                //cache hit
                if (localStorage[key]) {
                    data = JSON.parse(localStorage[key]);
                    console.log('cache hit ' + JSON.stringify(data));
                }

                //cache miss
                if (!data) {
                    localStorage[key] = JSON.stringify({});
                    data = JSON.parse(localStorage[key]);
                    console.log('cache miss ' + JSON.stringify(data));
                }

                //link event handlers
                element.find(':input').on('change keyup', saveField);

                //set data according to cache
                if (data) {
                    element.find(':input').each(function () {
                        if (this.type != 'submit') {
                            var input = this,
                                $input = $(input),
                                value = data[input.name];

                            if (input.type == 'radio' || input.type == 'checkbox') {
                                if (value) {
                                   ...