JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table-default" id="ttable5">
                        <thead>
                            <tr><th style="border: medium hidden;" class="numcx"></th>
                                <th class="head-default clickable-default" unselectable="on" style="-moz-user-select: none;">Nombre<img class="sort-img" src="" style="visibility: hidden;"></th>
                                <th class="sort-date head-default clickable-default" unselectable="on" style="-moz-user-select: none;">Provincia<img class="sort-img" src="" style="visibility: hidden;"></th>
                                <th class="sort-digit head-default clickable-default">Municipio<img class="sort-img" src="" style="visibility: hidden;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="0"><td class="numcx num-default">1</td>
                                
                                <td class="tablaprim body-default odd-default">1VESTIBULUM TORTOR NISL </td>
                                <td class="body-default odd-default">Sevilla</td>
                                <td class="body-default odd-default">Castilleja de la Cuesta</td>
                            </tr>
                            <tr id="1"><td class="numcx num-default">2</td>
                            
                                <td class="tablaprim body-default">4VESTIBULUM TORTOR NISL </td>
                                <td class="body-default">Sevilla</td>
                                <td class="body-default">Castilleja de la Cuesta</td>
                            </tr>
                            <tr id="2"><td class="numcx num-default">3</td>
                            
                                <td class="tablaprim body-default odd-default">8VESTIBULUM TORTOR NISL </td>
                                <td class="body-default odd-default">Sevilla</td>
                                <td class="body-default...

CSS

/*
--------------Default Styles--------------
#tableid -> .table-default
#tableid thead tr th -> .head-default
#tableid tbody tr td -> .body-default
#tableid caption -> .caption-default
--------------Default Styles--------------
*/
.table-default
{
    width: 540px;
    margin: 1em auto;
    border-collapse: collapse;
    border: none;
    font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    /*border-right: 1px solid #A2A2A2;*/
}

th.head-default{border:none;}
tr{border-bottom: 1px solid #fff;}
thead{border-bottom: 1px solid #fff;}
tbody{border-top: 3px solid #4d4d4d;}

thead, .tablaprim{text-transform:uppercase; font-weight: bold;}

.head-default
{
    font-weight: normal;
    color: #fff;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    border-left: none;
    padding: 0.4em 1em 0.3em 9px;
    background: #37b04a url(images/bg-default.png) repeat-x;
}
.body-default
{
    border:none;
    color: #8E8E8E;
    padding: 9px;
/*    border-right: 1px solid #A3A3A3;*/
    font-size: 14px;
    text-align: left;
    background-color: #DDDDDD;
    border-bottom: 1px solid #FFFFFF;
}
.caption-default
{
    color: #646464;
    font-size: 0.94em;
    letter-spacing: 0.1em;
    margin: 1em 0 0;
    padding: 0;
    caption-side: top;
    text-align: left;
}

.oculta{
background:transparent !important;
padding:0;
margin:0;
}

/*
--------------Default Styles--------------


--------------Hover and Stripped Styles--------------
-- Hover Head --
#tableid thead tr th -> .hoverhead-default
#tableid tbody tr td -> .hoverheadtd-default
-- Hover Body --
#tableid tbody tr -> .hoverbody-default
-- Stripped --
#tableid tbody tr -> .odd-default
--------------Hover and Stripped Styles--------------
*/
.odd-default
{
    color: #4D4D4D;
    background-color: #E0E0E0;
}
.hoverhead-default
{
    color: #FFFFFF;
    cursor: default;
    background-color: #39bb4e;
    text-decoration: underline;
    border-left: 0px solid #39bb4e;
}
.hoverheadtd-default
{
  ...