JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.sequencejs.com/live-themes/modern-slide-in/css/sequencejs-theme.modern-slide-in.css">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <body>    
    <div class="body-wrap">

       
        
        <div id="mainbody" class="jobapply clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1 ">



                        <div id="rootwizard">
                           
                            <ul>
                                <li>
                                    <a href="#tab1" data-toggle="tab">Personal</a>
                                </li>
                                <li>
                                    <a href="#tab2" data-toggle="tab">Residence</a>
                                </li>
                                <li>
                                    <a href="#tab3" data-toggle="tab">History</a>
                                </li>
                                <li>
                                    <a href="#tab4" data-toggle="tab">License</a>
                                </li>
                                <li>
                                    <a href="#tab5" data-toggle="tab">Experience</a>
                                </li>
                                <li>
                                    <a href="#tab6" data-toggle="tab">Accidents</a>
                                </li>
                                <li>
                                    <a href="#tab7"...

CSS

/*
* ------------------------------------------------------------------------------------
* Base CSS 
* ------------------------------------------------------------------------------------
*/

/*.testborder { border:1px dotted red; }*/


html, body {
    height:100%;
    font-size: 1.02em;
}

body {
    background-color: #000;

	background-position: center top;
	background-repeat: no-repeat;
}

p {
    color:#DDDADA;
}
h1, h2, h3, h4, h5, h6 {
    color:white;
    font-weight:bold;
}
h1, h2, h3 {
    margin-top:10px;
    margin-bottom:10px;
}
h1 {
    font-size:36px;
}
h2 {
    font-size:30px;
}
h3 {
    font-size:26px;
}
h1 small, h2 small, h3 small {
    font-size:85%;
}

em {
    font-style:italic;
}

.Hlogo img {
    margin-right: 5px;
    vertical-align: text-top;
    width: 34px;
}

.Plogo img {
    float:left;
    margin:0 20px 10px 0;
}

/*
* ------------------------------------------------------------------------------------
* Sticky Footer
* ------------------------------------------------------------------------------------
*/

.body-wrap {
    min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -78px; /* the bottom margin is the negative value of the footer's height */
}

footer, .push {
    height: 78px; /* .push must be the same height as .footer */
}

/*
* ------------------------------------------------------------------------------------
* Navigation
* ------------------------------------------------------------------------------------
*/

.navbar {
    margin-bottom:0;
    border:none;
    border-radius:0;
}

.navbar-brand {
    padding: 10px 10px 2px 15px;
}

.navlogo {
    opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.navlogo:hover {
    opacity:0.7;
}

/*
* ------------------------------------------------------------------------------------
* Drop Logo
*...

JavaScript

$(function () {
    
    
    
    

/**************************************************************************************/
/* Extra Address Button */
/**************************************************************************************/  
    $('#show-address').on('mousedown', function (event) {
        event.preventDefault();       
        $('#addressBox .hidden:eq(0)').removeClass('hidden');
        if($('#extraAddress2').is(':visible')) {
            $('#tab3').find('#hide-address').removeClass('hidden');
        }
        if($('#extraAddress5').is(':visible')) {
            $('#tab3').find('#show-address').addClass('disabled');
        }
    });
    
    $('#hide-address').on('mousedown', function (event) {
        event.preventDefault();       
        var checkaddress = $('.hideMe:visible:last').attr('id');
        $('#tab3').find('#' + checkaddress).addClass('hidden');
        if($('#extraAddress5').is(':hidden')) {
            $('#tab3').find('#show-address').removeClass('disabled');
        }
        if($('#extraAddress2').is(':hidden')) {
            $('#tab3').find('#hide-address').addClass('hidden');
        }
    });
    
//    var addresscount = $(". hideMe:visible").length;
    
    

/**************************************************************************************/
/* Extra License Button */
/**************************************************************************************/  
    $('#show-license').on('mousedown', function (event) {
        event.preventDefault();       
        $('#licenseBox .hidden:eq(0)').removeClass('hidden');
        if($('#extraLicense2').is(':visible')) {
            $('#tab4').find('#hide-license').removeClass('hidden');
        }
        if($('#extraLicense5').is(':visible')) {
            $('#tab4').find('#show-license').addClass('disabled');
        }
    });
    
    $('#hide-license').on('mousedown', function (event) {
        event.preventDefault();       
        var checklicense =...