JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="tabs">
        <ul id='tab-list'>
            <li id='tab-1' class='tab'><span>Tab-1</span></li>
            <li id='tab-2' class='tab'><span>Tab-2</span></li>
            <li id='tab-3' class='tab'><span>Tab-3</span></li>
        </ul>
    </div>
    <div id="main-content">
        <div id="div-tab-1" class="div-tab">Content #1</div>
        <div id="div-tab-2" class="div-tab">Content #2</div>
        <div id="div-tab-3" class="div-tab">Content #3</div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
    
body {
    background-color: #f0f0f0;
    color: #606060;
}

#wrapper {
    margin: 2em auto;
    width: 40em;
    border: 1px solid #aaa;
}

#main-content {
    height: 480px;
    background-color: #fff;
    padding: 1em;
    position: relative;
    z-index: 10;
    border-top: 1px solid #aaa;
}
#tabs {
    background-color: #c8b6da;
    padding: 1.5em 1.5em 0.4em; 
}

#tab-list li {
    display: inline;
    background-color: #e7e7e7;
    padding: 0.5em 0;
    border: 1px solid #aaa;
    cursor: pointer;
}

#tab-list li.tab span {
    padding: 0.5em 1em;
}

#tab-list li.tab-active span {
    background-color: #fff;
    position: relative;
    z-index: 999;
}

#tab-list li.tab-active {
    color: #e17009;
}

.div-tab {
    display: none;
}

JavaScript

// Initialize default tab and content
$('#tab-1').addClass('tab-active');
$('#div-tab-1').show();

// Handle the tab clicks
$('.tab').click(function () {
    var active = $(this).attr('id');
    $('.tab').removeClass('tab-active');
    $(this).addClass('tab-active');
    $('.div-tab').hide();
    $('#div-' + active).show();
});