JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toggle-nav">
<div class="cont">
    <div class="content" id="content1">
        <a href="#">Doc1</a><br>
        <a href="#">Doc1</a><br>
        <a href="#">Doc1</a><br>
        <a href="#">Doc1</a><br>
    </div>
<div class="content" id="content2"><a href="#">Doc2</a></div>
</div>
<div id="tab">
<ul id="1">
<li id="tab1" class="active"><a href="#">Button 1</a></li>
<li id="tab2"><a href="#">Button 2</a></li>
</ul>
</div>
</div>

CSS

.wrap {
    width: 500px;
    height: 500px;
    background: #999;
    
}
.content
{
    display: none;
  
}
#tab li {
    display: inline;
    padding: 6px 10px;
-webkit-border-radius: 2px 2px;
border: solid 1px rgb(153, 153, 153);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
color: #333;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
    
}
#tab {
   width: 200px;
   
position: fixed;
}
.cont {
    width: 200px;
   margin: 0 auto;
}

JavaScript

$(document).ready(function() {
var activeId = $(".active").attr("id").replace("tab",""); $("#content" + activeId).show();
   $("#tab a").click(function() {

      //reset
      $(".content").fadeOut(200);
      $("#tab .active").removeClass("active");

      //act
      $(this).addClass("active");
      var id = $(this).closest("li").attr("id").replace("tab","")
      $("#content" + id).delay(200).fadeToggle(200);
     
  });
    });