JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<ul class="tab-buttons">
    <li index="0">One</li>
    <li index="1">Two</li>
    <li index="2">Three</li>
    <li index="3">Four</li>
</ul>
<div class="tab-text-wrapper">
    <div class="tab-text" >
        <p>Wow! Tab 1. Cool.</p>
    </div>
    <div class="tab-text">
        <p>Great. Good job. Tab 2</p>
    </div>
    <div class="tab-text">
        <p>You're smart. Too smart. Tab 3</p>
    </div>
    <div class="tab-text">
        <p>The End. Tab 4</p>
    </div>
</div>

CSS

*{margin:0px;padding:0px;}
body{background-color:whitesmoke;}
.tab-buttons{
    margin-top: 10px;
    margin-left: 10px;
    list-style-type: none;
    float: left;
    width: 100%;
}

.tab-buttons li{
    font-family:sans-serif;
    font-weight:100;
    float:left;
    padding:10px 15px 10px 15px;
    margin:5px;
    margin-bottom:0px;
    cursor:pointer;
    transition:all .15s;
}

.active{
    pointer-events:none;
    background-color:lightgray;
}

.tab-text-wrapper{
    margin-left: 15px;
    float: left;
}

.tab-text{
    width:450px;
    background-color:lightgray;
    padding:10px 15px 10px 15px;
}

JavaScript

// Tabbed content

$('.tab-text').hide(); // Hides all tab text
$('.tab-text').eq(0).toggle(); // Shows first tab text
$('.tab-buttons').children().eq(0).toggleClass('active');

var buttons = $('.tab-buttons').children();

buttons.click(function(){
    buttons.removeClass('active');
    $(this).toggleClass('active');
    $('.tab-text').hide();
    $('.tab-text').eq($(this).attr('index')).fadeToggle(0);
});