JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div id='childarpt' class='childarpt' ></br>
  <div id="tabs"><ul>
  <li class="active"><a href="#Total"><span>Total</span></a></li>
  <li><a href="#USA"><span>USA</span></a></li>
  <li><a href="#ASIA"><span>ASIA</span></a></li>
  <li><a href="#JAPAN"><span>JAPAN</span></a></li>
  <li><a href="#LATAM"><span>LATAM</span></a></li>
  <li><a href="#EMEA"><span>EMEA</span></a></li>
  </ul>
  
<table>
  <!--<div id="Total" class="tab active">-->
      
      <tr id="Total" class="tab-active">
          <th class='colHead'>title</th>
          <th class='colHead'></th>
          <th class='colHead'>04-30-2015<br/> count</th>
          <th class='colHead'>Hires</th>
          <th class='colHead'>Vol<br/>Terms</th>
          <th class='colHead'>Invol<br/>Terms</th>
          <th class='colHead'>**Other<br/> Activity</th>
          <th class='colHead'>Delta</th>
          <th class='colHead'>***05-21-2015<br/> Actual HC</th>
          <th class='colHead'>Prior Week <br/>2015/05/21<br/>Actual HC</th>
          <th class='colHead'>Pending<br/> Hires</th>
          <th class='colHead'>Future<br/>Terms<br/>(Non-RIF)</th>
          <th class='colHead'>Planned<br/> RIFs</th>
          <th class='colHead'>**Other CHC<br/> Activity</th>
          <th class='colHead'>Net CHC<br/>Impact (thru <br/>2015/05)</th>
          <th class='colHead'>CHC<br/>Impact<br/>(thru<br/>2015/05)</th>
          <th class='colHead'>Prior Week<br/>(2015/05/21)  CHC <br/> Impact</th>
      </tr>
   
  <!--</div>-->
   
      
        <tr id="USA" class="tab">
            <th class='colHead'>Officer Title Detail</th>
            <th class='colHead'></th>
            <th class='colHead'>04-30-2015<br/> Actual HC</th>
            <th class='colHead'>Hires</th>
            <th class='colHead'>Vol<br/>Terms</th>
            <th class='colHead'>Invol<br/>Terms</th>
            <th class='colHead'>**Other<br/> Activity</th>
            <th class='colHead'>Delta</th>
            <th...

CSS

#nav, #nav ul {
	list-style: none;
	margin-left: 20px;
}

#nav li {
	list-style: none;
	padding-left: 0px;
	vertical-align: middle;
}

#nav liaa {
	padding-left: 17px;
	background: url(iarrow.gif) left top no-repeat;
	padding-bottom: .45em;
}

#nav a {
	text-decoration: none;
	color: #960000;
}

#nav a:hover {
	color: #1b53b9;
}

#nav .expandable {
	padding-left: 0px;
	background-image: none;
}

.reportcont {
	position: relative;
	left: 2px;
	top: 0;
	width: 99%;
	overflow: scroll;
	border: 0px solid #ccc;
}
</style>
<style>
a {
	font-family: Arial, serif;
	font-weight: regular;
	font-size: 10px;
	font-color: #000080;
	text-decoration: underline;
}

a:link {
	font-color: #000080;
}

a:visited {
	color: #B00081;
}
</style>

<style type="text/css">
.busHead {
	background-color: #D5E5ED;
	font-family: Arial;
	font-color: #0099CC;
	font-size: 8px;
	font-weight: bold;
}

.totHead {
	position: fixed;
	background-color: #ffffff;
	font-family: Arial;
	font-color: #000080;
	font-size: 8px;
	font-weight: bold;
}

.colHeadTot {
	border: 2px;
	font-family: Arial, serif;
	font-weight: bold;
	font-size: 10px;
	color: #000080;
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 0;
	background-color: #D5E5ED;
	vertical-align: middle;
}

.colHead {
	border: solid 1px #eeeeff;
	font-family: Arial, serif;
	font-weight: bold;
	font-size: 12px;
	color: #0099CC;
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 0;
	background-color: #D5E5ED;
	vertical-align: middle;
	white-space: nowrap;
}

.tabValBus {
	border-left: solid 1px #eeeeff;
	border-right: solid 1px #eeeeff;
	border-top: solid 1px #eeeeff;
	border-bottom: solid 1px #eeeeff;
	border-collapse: collapse;
	font-family: Arial, serif;
	font-weight: regular;
	font-size: 11px;
	color: #000080;
	text-align: left;
	margin-bottom: 0;
	padding-bottom: 0;
	background-color: #ffffff;
	vertical-align: middle;
	white-space: pre-wrap;
}

.tabVal {
	border-left: solid 1px #eeeeff;
	border-right: solid 1px #eeeeff;
	border-top:...

JavaScript

$( "#tabs" ).tabs();