JSFiddle - React, Tailwind, and code Playground

Account & Order Information Bootstrap Form

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <!-- progress -->
    <div class="progress-meter-container step1">
        <div class="progress-meter">
            <div class="meter"></div>
        </div>
        <div class="bulb-bg-1"></div>
        <div class="bulb-1">
            <h5 class="sclass">ACCOUNT</h5>
        </div>
        <div class="bulb-1-inner bulb-1-active"><i class="fa fa-user activeiciion"></i>
        </div>
        <div class="bulb-bg-2"></div>
        <div class="bulb-2">
            <h5 class="sclass dff">BILLING</h5>
        </div>
        <div class="bulb-2-inner"><i class="fa fa-building-o notactiveicon"></i>
        </div>
        <div class="bulb-bg-3"></div>
        <div class="bulb-3">
            <h5 class="sclass dff2">CHECKOUT</h5>
        </div>
        <div class="bulb-3-inner"><i class="fa fa-credit-card notactiveicon abdioo"></i>
        </div>
        <div class="bulb-bg-4"></div>
        <div class="bulb-4">
            <h5 class="sclass dff3">CONFIRMATION</h5>
        </div>
        <div class="bulb-4-inner"><i class="fa fa-check notactiveicon abdioo"></i>
        </div>
    </div>
    <!-- /.progress -->
    <!-- page row -->
    <div class="row">
         <h4 class="h4dd"> ACCOUNT & ORDER INFORMATION</h4>

        <p class="pdd">Here, type your full personal information, and also you will find information about your demand</p>
         <h4 class="h4information"><span>1</span> Account Information :</h4>

        <div class="col-md-8">
            <!-- form start -->
            <form action="/" role="form">
                <div class="form-wizard">
                    <div class="row">
                        <fieldset>
                            <label...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600, 700|Lato:400, 300, 700);

/* -------------------------------------------------- */
/*	Basic Elements
/* -------------------------------------------------- */
 body {
    font-family:'Open Sans', sans-serif;
    background: #EBEDF0;
    padding: 30px 0;
}
html {
    height: 100%;
}
/* -------------------------------------------------- */
/*	Page Elements
/* -------------------------------------------------- */
 .container {
    background:#fff;
    border-radius: 3px;
    padding: 20px 10px;
}
.rightfloat {
    float:right;
}
.leftfloat {
    float:left;
}
/* -------------------------------------------------- */
/*	loader
/* -------------------------------------------------- */
 .pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.pace-inactive {
    display: none;
}
.pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}
/* -------------------------------------------------- */
/*	botton
/* -------------------------------------------------- */
 .botton-row {
    margin-top: 30px;
    padding: 0 20px;
}
.animate {
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}
.action-button {
    position: relative;
    padding: 10px 35px;
    margin: 0px 10px 10px 0px;
    float: left;
    border-radius: 6px;
    font-size: 13px;
    color: #FFF;
    text-decoration: none;
}
.action-button:hover, .action-button:active, .action-button:focus {
    color: #FFF;
    text-decoration: none;
}
.iprev {
    padding-right: 5px;
}
.blue {
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
}
.red {
    background-color: #E74C3C;
    border-bottom: 3px solid #BD3E31;
    text-shadow: 0px -2px #BD3E31;
}
.green {
    background-color: #B9C0CD;
   ...

JavaScript

(function () {
    var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X = [].slice,
        Y = {}.hasOwnProperty,
        Z = function (a, b) {
            function c() {
                this.constructor = a
            }
            for (var d in b) Y.call(b, d) && (a[d] = b[d]);
            return c.prototype = b.prototype, a.prototype = new c, a.__super__ = b.prototype, a
        }, $ = [].indexOf || function (a) {
            for (var b = 0, c = this.length; c > b; b++) if (b in this && this[b] === a) return b;
            return -1
        };
    for (u = {
        catchupTime: 100,
        initialRate: .03,
        minTime: 250,
        ghostTime: 100,
        maxProgressPerFrame: 20,
        easeFactor: 1.25,
        startOnPageLoad: !0,
        restartOnPushState: !0,
        restartOnRequestAfter: 500,
        target: "body",
        elements: {
            checkInterval: 100,
            selectors: ["body"]
        },
        eventLag: {
            minSamples: 10,
            sampleCount: 3,
            lagThreshold: 3
        },
        ajax: {
            trackMethods: ["GET"],
            trackWebSockets: !0,
            ignoreURLs: []
        }
    }, C = function () {
        var a;
        return null != (a = "undefined" != typeof performance && null !== performance && "function" == typeof performance.now ? performance.now() : void 0) ? a : +new Date
    }, E = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame, t = window.cancelAnimationFrame || window.mozCancelAnimationFrame, null == E && (E = function (a) {
        return setTimeout(a, 50)
    }, t = function (a) {
        return clearTimeout(a)
    }), G = function (a) {
        var b, c;
        return b = C(), (c = function () {
            var d;
            return d = C() - b, d >= 33 ? (b = C(), a(d,...