JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<script src="https://coba-host-file.googlecode.com/svn-history/r2/js/jquery.inputfocus-0.9.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/style.css" media="all"/>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    
    <script type="text/javascript" src="js/jquery.main.js"></script>
    <script type="text/javascript" src="js/cities.js"></script>
    <script type="text/javascript" src="js/masked_input_1.3.1.js"></script>


</head>
<body>

<div id="container">
    <form action="#" method="post">

        <!-- #first_step -->
        <div id="first_step">
            <h1>KIS Volunteer Signup Form</h1>

            <div class="form">
                <input type="text" name="firstname" id="firstname" value="first name"/>
                <label for="firstname">Your first name. </label>

                <input type="nr" name="middlename" id="middlename" value="middle name"/>
                <label for="middlename">Your middle name if applicable. </label>

                <input type="text" name="lastname" id="lastname" value="last name"/>
                <label for="lastname">Your last name.</label>

                <input type="text" name="address" id="address" value="address"/>
                <label for="address">Your address. </label>

                <input type="text" name="city" id="city" value="city"/>
                <label for="city">Your city. </label>

                <input type="text" name="zip" id="zip" value="zip code"/>
                <label for="zip">Your zip code. </label>
                <!-- clearfix -->
                <div class="clear"></div>

                <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
            </div>

        </div>


        <!-- #second_step -->
        <div...

CSS

/* CSS Reset (Eric Meyer) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


@font-face {
    font-family: 'Cantarell';
    src: url(../fonts/Cantarell-Regular.eot);
    src: local('Cantarell'), url('../fonts/Cantarell-Regular.ttf') format('truetype');
}

body {
    background-color: #f9f9f9;
    color: #222;
    font-family: Cantarell, Verdana, sans-serif;
    font-size: 12px;
}


input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container {
    background: url('../images/container.png') no-repeat;
    width: 754px;
    height: 370px;
    margin: 20px auto;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
#container #first_step, #second_step, #third_step, #fourth_step { display: none; }
#container #first_step { display: block; }

#container .form {
    margin: 26px 72px 0px 72px;
}

#container .form #leftSummary{
    float: left;
    margin: 2px 25px 5px 2px;
    overflow: hidden;

}

#container .form #rightSummary{
    float: right;
    margin: 2px 50px 5px 20px;
    overflow: hidden;

}

#container h1, #container h2 {
    font-size: Cantarell, Verdana, sans-serif;
    text-align: center;
    font-size: 24px;
    text-shadow: 1px 1px 2px #222;
}
#container h1 span { color: #a90329; }

#container h2 {
    color: #888;
    font-size: 20px;
    text-align: left;
    text-shadow:...

JavaScript

$(document).ready(function () {
    //original field values
    var field_values = {
        //id        :  value
        'firstname': 'first name',
        'middlename': 'middle name',
        'lastname': 'last name',
        'address': 'address',
        'city': 'city',
        'zip': 'zip code',
        'dob': 'date of birth',
        'ssn': 'ssn',
        'homephone': 'home phone',
        'workphone': 'work phone',
        'cellphone': 'cell phone',
        'employer': 'employer',
        'emergency': 'emergency contact',
        'relationship': 'relationship',
        'phoneday': 'emergency phone day',
        'phonenight': 'emergency phone night',
        'email': 'email'

    };


    //inputfocus
    $('input#firstname').inputfocus({ value: field_values['firstname'] });
    $('input#middlename').inputfocus({ value: field_values['middlename'] });
    $('input#lastname').inputfocus({ value: field_values['lastname'] });
    $('input#address').inputfocus({ value: field_values['address'] });
    $('input#city').inputfocus({ value: field_values['city'] });
    $('input#zip').inputfocus({ value: field_values['zip'] });
    $('input#dob').inputfocus({ value: field_values['dob']});
    $('input#ssn').inputfocus({ value: field_values['ssn']});
    $('input#homephone').inputfocus({ value: field_values['homephone']});
    $('input#workphone').inputfocus({ value: field_values['workphone']});
    $('input#cellphone').inputfocus({ value: field_values['cellphone']});
    $('input#employer').inputfocus({ value: field_values['employer']});
    $('input#emergency').inputfocus({ value: field_values['emergency']});
    $('input#relationship').inputfocus({ value: field_values['relationship']});
    $('input#phoneday').inputfocus({ value: field_values['phoneday']});
    $('input#phonenight').inputfocus({ value: field_values['phonenight']});
    $('input#email').inputfocus({ value: field_values['email']});



    //reset progress bar
    $('#progress').css('width', '0');
   ...