JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<!-- <table id="empDataTable">
<thead style="display: block;"><tr><th>EMPID</th><th>NAME</th><th>ADDRESS</th></tr></thead>
</table> -->
<table id="empDataTable">
<thead>
<tr>
<th>EMPID</th>
<th>NAME</th>
<th>ADDRESS</th>
</tr>
</thead>
<tbody>
<tr style="display: block;">
<td>1</td>
<td>John</td>
<td>1229,Wison Ave, Chicago, IL 60678</td>
</tr>
<tr style="display: block;"><td>2</td><td>Mike</td><td>350 5th Ave, New York, NY 10118</td></tr><tr style="display: block;"><td>3</td><td>Tommy</td><td>861 Milwaukee Ave, Chicago IL 60640</td></tr><tr style="display: block;"><td>4</td><td>Jackson</td><td>738 Ashland Ave, Chicago IL 60678</td></tr><tr style="display: block;"><td>5</td><td>Wilson</td><td>566 34th Ave, New York, NY 10118</td></tr><tr style="display: none;"><td>6</td><td>Eric</td><td>1226 Grand St, Chicago IL 60611</td></tr><tr style="display: none;"><td>7</td><td>Nate</td><td>350 5th Ave, New York, NY 10118</td></tr><tr style="display: none;"><td>8</td><td>Julie</td><td>1112 York Rd, Chicago IL 60678</td></tr><tr style="display: none;"><td>9</td><td>Monica</td><td>1514 Wilson St, Chicago IL 60678</td></tr></tbody></table>

<script>

// For each item in our JSON, add a table row and cells to the content string
var empdata = [
		{empid:'EMPID', name:'NAME', address:'ADDRESS'},
    {empid:1, name:'John', address:'1229,Wison Ave, Chicago, IL 60678'},
    {empid:2, name:'Mike', address:'350 5th Ave, New York, NY 10118'},
    {empid:3, name:'Tommy', address:'861 Milwaukee Ave, Chicago IL 60640'},
    {empid:4, name:'Jackson', address:'738 Ashland Ave, Chicago IL 60678'},
    {empid:5, name:'Wilson', address:'566 34th Ave, New York, NY 10118'},
    {empid:6, name:'Eric', address:'1226 Grand St, Chicago IL 60611'},
    {empid:7, name:'Nate', address:'350 5th Ave, New York, NY 10118'},
    {empid:8, name:'Julie', address:'1112 York Rd, Chicago IL 60678'},
    {empid:9, name:'Monica', address:'1514 Wilson St, Chicago IL 60678'},
];

$(document).ready(function() {	  
  ...

CSS

.controls a{
    padding:3px;
    border:1px solid gray;
    margin:2px;
    color:black;
    text-decoration:none
}
.active{
    background:darkblue;
    color:white !important;
}

table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
tbody td {
   // border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}