JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a>
</li>
<li><a href="#tabs-2">Proin dolor</a>
</li>
<li><a href="#tabs-3">Aenean lacinia</a>
</li>
</ul>
<div id="tabs-1">
<p>Tabs 1</p>
<table id="searchMe1" width="980px">
<thead>
<tr>
<th width="20%">First Name</th>
<th width="20%">Last Name</th>
<th width="10%">Concept</th>
<th width="10%">Rating</th>
<th width="40%">AKA</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%">Tony</td>
<td width="20%">Stark</td>
<td width="10%">Marvel</td>
<td width="10%">42</td>
<td width="40%">Iron Man</td>
</tr>
<tr style="display: none">
<td width="20%">Jack</td>
<td width="20%">Sparrow</td>
<td width="10%">Disney</td>
<td width="10%">40</td>
<td width="40%">Pirate</td>
</tr>
<tr>
<td width="20%">Bruce</td>
<td width="20%">Banner</td>
<td width="10%">Marvel</td>
<td width="10%">38</td>
<td width="40%">The Hulk</td>
</tr>
<tr>
<td width="20%">Clarke</td>
<td width="20%">Kent</td>
<td width="10%">DC</td>
<td width="10%">35</td>
...
CSS
tr:nth-child(even) {
background-color : gray;
}
tr:nth-child(odd) {
background-color : white;
}
JavaScript
$(function () {
$("#tabs").tabs();
});