JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-box">
<a href="javascript:;" class="tabLink activeLink" id="Tab1">Tab1</a>
<a href="javascript:;" class="tabLink" id="Tab2">Tab2</a>
<a href="javascript:;" class="tabLink" id="Tab3">Tab3</a>
</div>

<div class="tabcontent" id="Tab1-1"> 
Tab1
</div>

<div class="tabcontent hide" id="Tab1-2"> 
Tab2
</div>

<div class="tabcontent hide" id="Tab1-3"> 
Tab3
</div>

CSS

.tab-box {
	border-bottom: 1px solid #666666;
	padding-bottom:5px;
}

.tabLink {
margin-top:30px;
    display: inline-block;
}
.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
}
.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
}
.tabcontent {
	padding: 5px;
	width: 99%;
}
.hide { display: none;}
.small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Calibri; }

JavaScript

$(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;	  
      });
    });  
  });