JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
<div class="tab" >Tab1</div>
<div class="tab" >Tab2</div> 
<div class="tab" >Tab3</div>
</div><br><br>
<div class="pagecontent" >pagecontent for Tab1</div>
<div class="pagecontent" >pagecontent for Tab2</div>
<div class="pagecontent" >pagecontent for Tab3</div>

CSS

body {background:#f7f7f7;}
.tab {background:#f3f3f3;margin-right:1px;cursor:pointer;float:left;height:25px;padding:3px 5px 0px 5px;border: 1px solid #c9c9c9; -moz-border-radius: 7px 7px 0px 0px;-webkit-border-radius: 7px 7px 0px 0px;    -khtml-border-radius:     7px 7px 0px 0px;    border-radius: 7px 7px 0px 0px;}
.tab:hover{background:#e0e0e0 !important;color:#ff0000;border: 1px solid #c1c1c1;}
.pagecontent {display:none;}

JavaScript

$(function() {  
    $('.pagecontent').eq(0).show();
    $('.tab').click(function() {  
        $('.pagecontent').hide();
        $('.tab').css('background-color','#f3f3f3');
        $('.tab').eq($(this).index()).css('background-color','#d6d6d6');
        $('.pagecontent').eq($(this).index()).show();
    });  
});