JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<div id="container">
    <div id="form1-container" class="form-container">
        <form id="form1" name="form1" method="post">
            <label for="name">Name</label>
            <input name="name" type="text">
            <label for="email">Email</label>
            <input name="email" type="email">
            <label for="phone">Phone</label>
            <input name="phone" type="tel">
            <button class="btn continue">Continue</button>
        </form>
    </div>
    <div id="form2-container" class="form-container">
        <form id="form2" name="form2" method="post">
            <label for="address">Address </label>
            <input name="address" type="text">
            <label for="city">City</label>
            <input name="city" type="text">
            <label for="state">State</label>
            <select name="state"></select>
            <label for="zip">Zip Code</label>
            <input name="zip" id="zip" type="num">
            <button class="btn back">Back</button>
            <button class="btn continue">Continue</button>
        </form>
    </div>
    <div id="form3-container" class="form-container">
        <form id="form3" name="form3" method="post">
            <label for="cc">Credit Card #</label>
            <input name="cc" type="num">
            <label for="exp">Exp. Date</label>
            <input name="exp" type="month">
            <label for="ccv">CCV#</label>
            <input name="ccv" type="num">
            <button class="btn back">Back</button>
            <button class="btn continue">Continue</button>
        </form>
    </div>
</div>

CSS

* { box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; font: 1em Verdana; }

#container {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.form-container {
    position: relative;
    width: 250px;
    height: 400px;
    border: 1px solid #666;
    padding: 25px;
}

#form1-container {
    top: 0;
    left: 250px;
    background-color: #f9f9f9;
    z-index: 3;
}
#form2-container {
    top: -375px;
    left: 400px;
    z-index: 2;
    background-color: #fcfcfe;
    border: 1px solid #ccc;
}
#form3-container {
    top: -775px;
    left: 100px;
    z-index: 1;
    background-color: #fcfcfe;
    border: 1px solid #ccc;
}

label { display: block; font-size: 0.6em; }
input,select { padding: 0.4em; width: 100%; margin-bottom:2em; }
.btn { font-size: 0.8em; min-width: 5em; border-radius: none; background-color: #333; border: 1px solid #333; padding: 0.4em; color: #fff; }
.btn.back { float: left; }
.btn.continue { float:right; }

JavaScript

(function() {
    var getCurrent = function(e) {
        
    };
    
    var moveNext = function(e) {
        var parent = $(e.target).parent().parent();
        var next = parent.next('.form-container');
    };
    
    var movePrev = function(e) {
        var parent = $(e.target).parent().parent();
        var prev;
        parent.prev('.form-container').length===0 ? prev=$('.form-container').last() : prev=parent.prev('.form-container');
    };
    
    $('.continue').on('click', moveNext);
    $('.back').on('click', movePrev);
    
    $('.btn').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
    });
})();