JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

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

CSS

#tabs {
   margin: 0px;
   padding: 0px;
   float: left;
   clear: both;
}
#tabs li,
#tabs li a {
    float: left;
}
#tabs a {
    padding: 3px;
}

#container {
    float: left;
    clear: both;
}

JavaScript

$(document).ready(function() {
    var tabs = $('#tabs'),
        container = $('#container'),
        containerDiv = container.find('> div');
    
    container.find('> div:not(:first)').hide();
    
    
    tabs.find('li').on("click", function() {
        var li = $(this).index();
    
        containerDiv
            .hide()
            .eq( li ).fadeIn(500);
    });
});