JSFiddle - React, Tailwind, and code Playground

by Awesome

HTML

<div class="tab-box"> 
<a href="#companyinfo" class="tabLink activeLink">Company</a> 
<a href="#contacts" class="tabLink">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo-1"> 
    company info
</div>

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

CSS

.tab-box {
	border-bottom: 1px solid #666666;
	padding-bottom:5px;
}
a.tabLink {
    margin-top: 5px;
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 () {
       $(".tabcontent").addClass("hide");
       $($(".activeLink").attr('href') + '-1').removeClass("hide");
       $(".tabLink").each(function () {
           var _tabLink = $(this);
           var _tabLinkAttr = $(_tabLink.attr('href') + '-1');
           _tabLink.click(function () {
               $(".tabLink").removeClass("activeLink");
               _tabLink.addClass("activeLink");

               $(".tabcontent").addClass("hide");
               _tabLinkAttr.removeClass("hide");
           });
       });
   });