JSFiddle - React, Tailwind, and code Playground

by sachips

HTML

<ul class="tab">
    <li class="active">TAB 1</li>
    <li>TAB 2</li>
    <li>TAB 3</li>
</ul>

<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>

CSS

ul.tab {
    list-style: none;
}
ul.tab li {
    float: left;
    margin-right: 10px;
    padding: 10px;
    background-color: #f2f2f2;
    color: #666;
    cursor: pointer;
}
ul.tab li:hover {
    color: #FF0000;
}
ul.tab li.active {
    background-color: #999;
    color: #fff;
}
div.tabContent {
    clear: both;
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
    display: none;
}
div.active {
    display: block;
}

JavaScript

$(function() {
    $(".tab li").click(function() {
        var num = $(".tab li").index(this);
        $(".tabContent").removeClass('active');
        $(".tabContent").eq(num).addClass('active');
        $(".tab li").removeClass('active');
        $(this).addClass('active')
    });
});