JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-div">
        <div class="tab">
        <ul>
            <li id="tab1" class="active"><a href="#">Link 1</a></li>
            <li id="tab2"><a href="#">Link 2</a></li>
            <li id="tab3"><a href="#">Link 3</a></li>
            <li id="tab4"><a href="#">Link 4</a></li>
        </ul>
        </div>

        <div id="content1" class="content">Content Here1</div>
        <div id="content2" class="content">Content Here2</div>
        <div id="content3" class="content">Content Here3</div>
        <div id="content4" class="content">Content Here4</div>
    </div>


    <div class="container-div">
        <div class="tab">
        <ul>
            <li id="tab5" class="active"><a href="#">Link 5</a></li>
            <li id="tab6"><a href="#">Link 6</a></li>
            <li id="tab7"><a href="#">Link 7</a></li>
            <li id="tab8"><a href="#">Link 8</a></li>
        </ul>
        </div>
        <div id="content5" class="content">Content Here5</div>
        <div id="content6" class="content">Content Here6</div>
        <div id="content7" class="content">Content Here7</div>
        <div id="content8" class="content">Content Here8</div>
    </div>

CSS

.content
{
    display: none;
}

JavaScript

$(document).ready(function() {
    var activeId = $(".active").attr("id").replace("tab",""); 
    $("#content" + activeId).show();
   
    $(".tab a").click(function() {
      $(".content").hide();
      $(".tab a.active").removeClass("active");
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   });

});