JSFiddle - React, Tailwind, and code Playground

HTML

<table class="datatable">
        <tr>
            <th class="sortasc-header"><a href="#">Name</a></th>
            <th>Profession</th>
            <th class="sortdesc-header"><a href="#">Age</a></th>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="altrow">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="altrow">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="altrow">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="altrow">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="altrow">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
        <tr class="row">
            <td>Naveen</td>
            <td>Consultant</td>
            <td>24 years</td>
        </tr>
    </table>

CSS

.datatable
{
    border: solid 1px #7f7f7f;
    color:#000000;
    width: 100%;
}        
.datatable th
{
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px 0px;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #000;
    padding: 4px 5px 4px 10px;
    text-align: center;
    vertical-align: bottom;
    font-size: 14px;
}
.datatable th a
{ 
    color:#00002B;
    padding-right:18px;
    text-decoration: none;
}
.datatable th.sortasc-header, .datatable th.sortdesc-header {
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px -100px;
}

.datatable th.sortasc-header a {
    background:url(http://quenshsolutions.ie/Images/asc.gif) right center no-repeat; 
}
.datatable th.sortdesc-header a {
    background:url(http://quenshsolutions.ie/Images/desc.gif) right center no-repeat; 
}
.datatable tr {
    font-size: 12px;
    color:#777;
}
.datatable .row td, .datatable .altrow td 
{
    text-align:left;
    padding: 4px 10px 4px 10px;
    border-right: solid 1px #cbcbcb;
}
.datatable .row 
{
    background-color: #FFFFFF;
}
.datatable .altrow 
{
    background-color: #EDF5FF;
}  
.datatable .row td.sortasc-row, .datatable .row td.sortdesc-row
{
    background-color: #EDF5FF;
}
.datatable .altrow td.sortasc-row, .datatable .altrow td.sortdesc-row
{
    background-color: #DBEAFF;
}      
.datatable tr.row:hover, .datatable tr.altrow:hover {
    color: #000;
    background-color: #FFFACD;
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
}
.datatable .row td.first { padding-left:10px; }
.datatable th.first { padding-left:10px; }