JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<div id="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a>
        </li>
        <li><a href="#tab-2">Tab 2</a>
        </li>
        <li><a href="#tab-3">Tab 3</a>
        </li>
        <li><a href="#tab-4">Tab 4</a>
        </li>
    </ul>
    <div id="tab-1">Tab 1</div>
    <div id="tab-2">Tab 2</div>
    <div id="tab-3">Tab 3</div>
    <div id="tab-4">Tab 4</div>
</div>

CSS

#tabs {
    height: 120px;
    overflow: hidden;
}

JavaScript

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');

        var currentTab = $(this).attr('href');

        $('#tabs div').fadeOut();
        $(currentTab).fadeIn();
        return false;
    });
});