JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="content">
<div id="tab1">
    TAB 1
</div>

<div id="tab2">
    TAB 2
</div>

<div id="tab3">
    TAB 3
</div>
</div>

JavaScript

$("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
            $('#content div').hide();   
            $($(this).attr('href')).fadeIn();         
        
    });