JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

Hash=<input type="text" id="hashis" />
<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 hide" 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() {
    $(".tabLink").each(function(){
        if(location.hash) {
            $(".tabLink").removeClass("activeLink");
            $(location.hash+"-1").addClass("activeLink");
            
            $(".tabcontent").addClass("hide")
            $(location.hash+"-1").removeClass("hide")
        } else {
            $(".tabLink").click(function(){
                $("#hashis").val(location.hash);
                $(".tabLink").removeClass("activeLink");
                $(this).addClass("activeLink");
                
                $(".tabcontent").addClass("hide")
                $(location.hash+"-1").removeClass("hide")
            });
        }
    });
    $("#hashis").val(location.hash);
});