JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box tabs">
    <div class="box_header">
    <h2>3/4 Width</h2>
    <ul class="tab_nav">
        <li><a href="#tab1" class="current_tab">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
</div>
<div class="box_content tab_content" id="tab1">1</div>
<div class="box_content tab_content" id="tab2">2</div>
<div class="box_content tab_content" id="tab3">3</div>
<div class="box_content tab_content" id="tab4">4</div>
<div class="box_content tab_content" id="tab1">1</div>
<div class="box_content tab_content" id="tab2">2</div>
<div class="box_content tab_content" id="tab3">3</div>
<div class="box_content tab_content" id="tab4">4</div></div>



<div class="box tabs">
    <div class="box_header">
    <h2>Take 2</h2>
    <ul class="tab_nav">
        <li><a href="#tab11" class="current_tab">Tab #11</a></li>
        <li><a href="#tab21">Tab #21</a></li>
        <li><a href="#tab31">Tab #31</a></li>
        <li><a href="#tab41">Tab #41</a></li>
    </ul>
</div>
<div class="box_content tab_content" id="tab11">11</div>
<div class="box_content tab_content" id="tab21">21</div>
<div class="box_content tab_content" id="tab31">31</div>
<div class="box_content tab_content" id="tab41">41</div>
    </div>

JavaScript

$('.tabs .tab_content').hide(); // Hide all divs

$('.current_tab').each( function(){
        $($(this).attr('href')).show();                     
    }
$('.current_tab').each( function(){
        $($(this).attr('href')).show();                     
    }
);

$('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked
    var current_tab = $(this).closest('.tab_nav').find('.current_tab');
    $($(current_tab).attr('href')).hide(); 
    current_tab.removeClass('current_tab');
    $(this).addClass('current_tab'); //Set clicked link class to active
    $($(this).attr('href')).show(); 
    return false;
});