JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
<!-- 1st Tab: Research Area -->
<div class="usual">
<ul class="idTabs">
<li class="twoLineRight"><center>Computational<br />Biology</center></li>
<li class="twoLineRight"><center>Computer<br />Engineering</center></li>
<li class="twoLineRight"><center>Graphics and<br />User Interfaces</center></li>
<li class="oneLineRight"><center>Machine Learning</center></li>
<li class="oneLine"><center>Networking</center></li>
<li class="oneLineRightTop"><center>NLP and Speech</center></li>
<li class="oneLineRightTop"><center>Security and Privacy</center></li>
<li class="oneLineRightTop"><center>Software Systems</center></li>
<li class="oneLineRightTop"><center>Theory</center></li>
<li class="oneLineTop"><center>Vision and Robotics</center></li>
</ul>
<div id="compbio"><!-- 2nd Tab (Subsection): Computational Biology - Faculty List -->
<div id="compbioTab">
<ul>
<li style="display: none;"></li>
<li class="heading">Faculty</li>
<li class="top-right-bottom"><center><img src="/images/faculty/Erlich-ra-r.png" alt="" /><br />Yaniv<br />Erlich</center></li>
<li class="top-bottom"><center><img src="/images/faculty/Dpeer-ra-r.png" alt="" /><br />Dana<br />Pe'er</center></li>
<li class="split"></li>
<li class="right-bottom"><center><img src="/images/faculty/Ipeer-ra-r.png" alt="" /><br />Itsik<br />Pe'er</center></li>
<li class="bottom"><center><img src="/images/faculty/Ross-ra-r.png" alt="" /><br />Kenneth<br />Ross</center></li>
<li class="split"></li>
<li class="right-bottom"><center><img src="/images/faculty/Yemini-ra-r.png" alt="" /><br />Yechiam<br />Yemini</center></li>
<li class="bottom"></li>
</ul>
<p>&nbsp;</p>
<!-- 2nd Tab (Subsection): Computational Biology - overview -->
<div id="cb-overview" style="display: block;">
<div id="title_ra">Computational Biology</div>
<div id="heading">Overview</div>
<div id="paragraph">
<p>Computational biology and bioinformatics involve development and application of...

CSS

/*  idTabs ~ Sean Catchpole  */

/* Style for Usual tabs */
 .usual {
    /*background:#234455;*/
    color:#000;
    padding:15px 20px;
    width:800px;
    height: 300px;
    border:1px solid #222;
    /*margin:8px auto;*/
}
.usualBottom li {
    list-style:none;
    float:left;
}
.usualBottom ul a {
    display:block;
    width:100px;
    padding:6px 10px;
    text-decoration:none!important;
    margin:1px;
    margin-left:0;
    font:10px Verdana;
    color:#FFF;
    background:#444;
}
.usualBottom ul a:hover {
    color:#FFF;
    background:#111;
}
.usualBottom ul a.selected {
    margin-bottom:0;
    color:#000;
    background:snow;
    border-bottom:1px solid snow;
    cursor:default;
}
.usual div {
    /*
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
    background:snow;
  */
    font:10pt Georgia;
}
.usual div a {
    color:#000;
    font-weight:bold;
}
#usual2 {
    background:#0A0A0A;
    border:1px solid #1A1A1A;
}
#usual2 a {
    background:#222;
}
#usual2 a:hover {
    background:#000;
}
#usual2 a.selected {
    background:snow;
}
#tabs3 {
    background:#FF9;
}
/* Style for various uses of tabs */
 #freedom {
    float:left;
    width:90px;
    color:#68D;
    font:1.3em Cambria, Times New Roman, serif;
    font-style:italic;
}
#freedom li a {
    width:80px;
    text-align:left;
    padding:2px 6px 4px;
    background:#222;
    margin:1px;
    *margin:0px;
    display:block;
    text-decoration:none;
    font-weight:bold;
    font-size:0.7em;
    font-style:normal;
}
#freedom li a:hover {
    background:#0A0A0A;
    width:86px;
}
#freedom li a.selected {
    background:#FFF;
    color:#000;
    width:90px;
    cursor:default;
}
.tabContainer {
    width:400px;
    margin:20px auto;
    padding-top:2px;
    background:#181818;
    border:1px solid #222;
}
.tabContainer h3 {
    padding-bottom:4px;
    color:#F60;
}
.tabContainer p {
    padding:2px 12px 10px;
    text-align:left;
}
#three {
   ...

JavaScript

$("#adv2").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list)
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#compbioTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list)
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#compenginTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#machineTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#networkTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#speechTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected");
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#securityTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#softwareTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  });
$("#theoryTab").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
   ...