JSFiddle - React, Tailwind, and code Playground

by Thomas Pitera

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="tab-panels">
            <ul class="tabs">
                <li rel="panel1" class="active">Ship To Us</li>
                <li rel="panel2">Your Items</li>
                <li rel="panel3">Our Products</li>
                <li rel="panel4">Cart</li>
            </ul>

            <div id="panel1" class="panel active">
                <h1>
                Ship To Us
                </h1>
            </div>
            <div id="panel2" class="panel">
                 <h1>
                Your Items
                </h1>
            </div>
            <div id="panel3" class="panel">
                <h1>
                Our Products
                </h1>
            </div>
            <div id="panel4" class="panel">
                <h1>
                Cart
                </h1>
            </div>
        </div>

CSS

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}
.tab-panels {
   float:left;
   width:100%;
   background:#275572;
   overflow:hidden;
   position:relative;
}
.tab-panels ul {
    margin: 5px 0px 0px 0px;
    padding: 0;
    text-align:center;
}
.tab-panels ul li {
    list-style-type: none;
    display: inline-block;
    background: #e0ffff;
    margin: 0;
    padding: 10px 100px 5px 100px;
    border-radius: 10px 10px 0 0;
    color: black;
    font-weight: 800;
    cursor: pointer;
    height: 25px;
}
.tab-panels ul li:hover {
    color: #fff;
    background: #666;
}

.tab-panels ul li.active {
    color: #fff;
    background: #828892;
}

.tab-panels .panel {
    display:none;
    background: white;
    padding: 30px;
}

.tab-panels .panel.active {
    display:block;
}

JavaScript

$(function() {

    $('.tab-panels .tabs li').on('click', function() {

        var $panel = $(this).closest('.tab-panels');

        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');

        //figure out which panel to show
        var panelToShow = $(this).attr('rel');

        //hide current panel
        $panel.find('.panel.active').fadeOut(500, showNextPanel);

        //show next panel
        function showNextPanel() {
            $(this).removeClass('active');

            $('#'+panelToShow).fadeIn(300, function() {
                $(this).addClass('active');
            });
        }
    });


});