JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- multistep form -->
<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Personal Details</li>
        <li>Location</li>
        <li>Account Setup</li>
        <li>Verify User</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
         <h2 class="fs-title">Personal Details</h2>

         <h3 class="fs-subtitle">Tell us about yourself!</h3>

        <!--<input type="text" class="field text" id="fname" name="fname" placeholder="First Name" />-->
        <div id="firstName" class="input-wrapper small-12">
            <input type="text" class="text-field field" placeholder="First Name" name="firstName" id="firstName-input" value=""></input>
            <div class="warning"></div>
        </div>
        <div id="lastName" class="input-wrapper small-12">
            <input type="text" class="text-field field" placeholder="Last Name" name="lastName" id="lastName-input" value=""></input>
            <div class="warning"></div>
        </div>
        <div id="email" class="input-wrapper small-12">
            <input type="text" class="text-field field" placeholder="Email Address" name="email" id="email-input"></input>
            <div class="warning"></div>
        </div>
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
         <h2 class="fs-title">Where are you from?</h2>

         <h3 class="fs-subtitle">Almost there...</h3>

        <input type="text" name="phone" placeholder="Phone" />
        <textarea name="address" placeholder="Address"></textarea>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
      ...

CSS

/*custom font*/
 @import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    /*Image only BG fallback*/
    background-color: #a80012;
    background-image: url('http://dotty-mobile-nextgen.broadwaygaming.com/images/red-dots.png');
    /*background = gradient + image pattern combo*/
    /*background: 
		linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
		url('http://thecodeplayer.com/uploads/media/gs.png');*/
    font-family: montserrat, arial, verdana;
    height: 100%;
    overflow-x: hidden;
}
/*form styles*/
 #msform {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    /*stacking fieldsets above each other*/
    position: absolute;
}
/*Hide all except first fieldset*/
 #msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
 #msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
 #msform .action-button {
    width: 100px;
    background: #F7D404;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #F7D404;
}
/*headings*/
 .fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2c4396;
    margin-bottom: 10px;
    font-weight: bold;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #2c4396;
    margin-bottom: 20px;
}
/*progressbar*/
...

JavaScript

//jQuery time
var current_fs, next_fs, previous_fs, current_fields; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function () {

    if (animating) return false;
    animating = true;

    var current_fields = $(this).siblings().children('.field');
    for (var i = 0; i < current_fields.length; i++) {
        var field = current_fields[i].name;
        for (var j = 0; j < validatorArray.length; j++){
            if (validatorArray[j].name == field){
                if (validateOnChange(validatorArray[j]) == false){
                    $('#' + field).effect( "shake" );
                    animating = false;
                    return false;
                };
            }
        }
    }

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({
        opacity: 0
    }, {
        step: function (now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) + "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale(' + scale + ')'
            });
            next_fs.css({
                'left': left,
                    'opacity': opacity
            });
        },
        duration: 800,
        complete: function () {
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
   ...