JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.6.3/css/fuelux.min.css">
<script src="//www.fuelcdn.com/fuelux/3.6.3/js/fuelux.min.js"></script>
<body class="fuelux">
    <div class="wizard" data-initialize="wizard" id="wizardIllustration">
        <ul class="steps" style="margin-left: 0">
            <li data-step="1" data-name="campaign" class="active"><span class="badge badge-info">1</span>Connector<span class="chevron"></span>
            </li>
            <li data-step="2"><span class="badge">2</span>RecordSet<span class="chevron"></span>
            </li>
            <li data-step="3" data-name="template"><span class="badge">3</span>Template<span class="chevron"></span>
            </li>
        </ul>
        <div class="actions">
            <button type="button" class="btn btn-default btn-prev" disabled="disabled"><span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
            <button type="button" class="btn btn-default btn-next" data-last="Complete">Next<span class="glyphicon glyphicon-arrow-right"></span>
            </button>
        </div>
        <div class="step-content">
            <div class="step-pane sample-pane alert active" data-step="1">
                <div class="panel-body">
                    <div class="form-group form-group-sm">
                        <label class="control-label required col-md-2">Name</label>
                        <div class="control-field col-md-10">
                            <input type="text" class="form-control" tabindex="2005">
                        </div>
                    </div>
                    <div class="form-group form-group-sm">
                        <label class="control-label required col-md-2">Connector Type</label>
                        <div class="control-field col-md-10"><span class="gwt-RadioButton vrs-radio-btn"><input type="radio" name="gwt-uid-188" value="on" id="gwt-uid-194" tabindex="2006" checked=""><label for="gwt-uid-194">JDBC</label></span><span...

CSS

body {
    margin:30px;
}
.form-group-sm .form-control {
    height: 26px;
    padding: 0;
    padding-left: 5px;
    min-width: 70px;
    margin-top:5px;
}
.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

JavaScript

$('#myWizard').wizard();