JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://st3ph.github.io/jquery.easyWizard/js/jquery.easyWizard.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<form id="myWizard" type="get" action="" class="form-horizontal">
<section class="step" data-step-title="The first">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" class="input-xlarge" title="Email is required !" required >
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password" class="input-xlarge">
</div>
</div>
</section>
<section class="step" data-step-title="The second">
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input type="text" id="inputUsername" placeholder="Username" class="input-xlarge">
</div>
</div>
</section>
<section class="step" data-step-title="The third">
<div class="control-group">
<label class="control-label" for="inputFirstname">Firstname</label>
<div class="controls">
<input type="text" id="inputFirstname" placeholder="Firstname" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputCity">City</label>
<div class="controls">
<input type="text" id="inputCity" placeholder="City" class="input-xlarge">
</div>
</div>
</section>
</form>
CSS
.easyWizardSteps {list-style:none;width:100%;overflow:hidden;margin:0;padding:0;border-bottom:1px solid #ccc;margin-bottom:20px}
.easyWizardSteps li {font-size:18px;display:inline-block;padding:10px;color:#B0B1B3;margin-right:20px;}
.easyWizardSteps li span {font-size:24px}
.easyWizardSteps li.current {color:#000}
.easyWizardButtons {overflow:hidden;padding:10px;}
.easyWizardButtons button, .easyWizardButtons .submit {cursor:pointer}
.easyWizardButtons .prev {float:left}
.easyWizardButtons .next, .easyWizardButtons .submit {float:right}
JavaScript
$('#myWizard').easyWizard(
{
before: function(wizardObj, currentStepObj, nextStepObj) {
debugger;
}
});
}
});