JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
   <div id="tab-container">
      <ul>
         <li><a href="#" data-tab="#intro">Introduction</a></li>
         <li><a href="#" data-tab="#html">Html</a></li>
         <li><a href="#" data-tab="#css">CSS</a></li>
         <li><a href="#" data-tab="#js">JavaScript</a></li>
      </ul>
   </div>
  <div id="main-container">
   <div id="intro" class="tab-content">
      intro content
   </div>
   <div id="html" class="tab-content">
      html content
   </div>
   <div id="css" class="tab-content">
      css content
   </div>
   <div id="js" class="tab-content">
      js content
   </div>
  </div>
</div>

CSS

#content
{
   background-color: #f2f2f2;
   padding: 20px 10px;
   overflow: auto;
}
#tab-container
{
   float: left;
   margin: 50px 0 0 0;
   width: 126px;
}
#tab-container ul
{
   list-style: none;
   text-align: center;
}
#tab-container ul li
{
   border-top: 1px solid #666;
   border-right: 1px solid #666;
   border-bottom: 1px solid #666;
   border-left: 8px solid #666;
   background-color: #ddd;
   margin: 8px 0;
}
#tab-container ul li a,
#tab-container ul li a:visited
{
   text-decoration: none;
   color: #666;
   display: block;
   padding: 15px 5px;
}
#tab-container ul li:hover
{
   border-left: 8px solid #333;
}
#tab-container ul li a:hover
{
   color: #000;
}
#tab-container ul li.selected
{
   border-right: none;
   background-color: #fff;
   border-left: 8px solid #006699;
}
#main-container
{
   min-height: 400px;
   margin: 0 0 0 125px;
   padding: 20px;
   background-color: #fff;
   border: 1px solid #888;
}
.tab-content{
 display:none; 
}
}

JavaScript

$(document).ready(function () {
  // show the first tab
  $("#tab-container li:first").addClass("selected");
  $("div.tab-content:first").show();
  
  // hook up the other tabs
  $("#tab-container a").click(function(e){
    e.preventDefault();
    $("div.tab-content:visible").hide();
    $("li.selected").removeClass("selected");
    var id = $(this).data("tab");
    $(id).show();
    $(this).closest("li").addClass("selected");
  });
});