JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <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>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

CSS

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

JavaScript

$(document).ready(function() {
    $('.tab-content').slice(1).hide();
    $('.tab-menu li').eq(0).addClass('active');
    $('.tab-menu li a').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
    });
});