JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabcontainer">
<div class="tablink"></div>
  <div class="tab"><a href="#tab1">First</a></div>
    <div id="tab1" class="section">First Tab Content</div>
  <div class="tab"><a href="#tab2">Second</a></div>
    <div id="tab2" class="section">Second Tab Content</div>
  <div class="tab"><a href="#tab3">Third</a></div>
    <div id="tab3" class="section">Third Tab Content</div>
  <div class="tab"><a href="#tab4">Fourth</a></div>
    <div id="tab4" class="section">Fourth Tab Content</div>
<br class="clear" />
</div>

<div class="tabcontainer">
<div class="tablink"></div>
  <div class="tab"><a href="#tab5">Fifth</a></div>
    <div id="tab5" class="section">Fifth Tab Content</div>
  <div class="tab"><a href="#tab6">Sixth</a></div>
    <div id="tab6" class="section">Sixth Tab Content</div>
  <div class="tab"><a href="#tab7">Seventh</a></div>
    <div id="tab7" class="section">Seventh Tab Content</div>
  <div class="tab"><a href="#tab8">Eighth</a></div>
    <div id="tab8" class="section">Eighth Tab Content</div>
<br class="clear" />
</div>

<div class="tabcontainer">
<div class="tablink"></div>
  <div class="tab"><a href="#tab9">Nineth</a></div>
    <div id="tab9" class="section">Nineth Tab Content</div>
  <div class="tab"><a href="#tab10">Tenth</a></div>
    <div id="tab10" class="section">Tenth Tab Content</div>
  <div class="tab"><a href="#tab11">Eleventh</a></div>
    <div id="tab11" class="section">Eleventh Tab Content</div>
  <div class="tab"><a href="#tab12">Twelvth</a></div>
    <div id="tab12" class="section">Twelvth Tab Content</div>
<br class="clear" />
</div>

CSS

.clear { clear: both; }

.tabcontainer {
    width: 100%;
    margin: 0px;
}

.section {
    width: 50%;
    height: 100px;
    float: left;
    border: 1px solid #ccc;ue;
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.tab.active {
    background-color: black;
}

.tab.active a{
        color: #fff;
        display: block;
}

.tablink {
        position: relative;
        height: 31px;
}

.tab {
    float: left;
    text-align: center;
    border: 1px solid green;
        background-color: #ccc;
        padding: 5px;
}

a{
        text-decoration: none;
        color: #000;
}

a:hover {
    color: #fff;
}

.tab:hover {
    background-color: grey;
    padding: 5px;
}

JavaScript

//<![CDATA[ 
$(document).ready(function() {
    //When page loads...
    $(".section").hide(); //Hide all tabcontent
        var activecontent = $(".tabcontainer").find(".tab:first").addClass("active");  //Activate first tab
    $(activecontent).show(); //Show first tab content

        $.each($('.tabcontainer'),function(){
            var setfirst = $(this).find(".section:first").show();
        })
        
        $.each($('.tab'), function(){
            var arrTab = $(this).parent().find('.tablink');
            var contentTab = $(this).clone().wrap('<div class="tab">').parent().html();
            $(arrTab).append(contentTab);
            $(this).remove();
        })
        
    //On Click Event
    $(".tab").click(function() {
        $(this).parent().find('.tab').removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(this).closest('.tabcontainer').find('.section').hide(); //Hide all tab tabcontent
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + tabcontent
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });
        
}); 

//]]>