JSFiddle - React, Tailwind, and code Playground

HTML

<div class="groupBox separated">
        <div class="groupBoxTitle">Registro de Gastos</div>
        <a id="ContentPlaceHolderDefault_cp_content_ucRegistroGastos_3_libAgregarGasto" class="action inner right" href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$libAgregarGasto','')">Registrar Nuevo Gasto</a>

        <div class="gridViewScrollerH">
            <div>
    <table class="gridView" cellspacing="0" rules="all" border="1" id="ContentPlaceHolderDefault_cp_content_ucRegistroGastos_3_grvGastos" style="border-collapse:collapse;">
        <tbody><tr>
            <th scope="col">Acciones</th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$NoMovimiento')">No. de Movimiento</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$FechaPago')">Fecha de Pago</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$NoReferencia')">No. de Referencia</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$BeneficiarioProveedor')">Beneficiario</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$CentroCosto')">Secretaría o Centro de Costo</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$Concepto')">Concepto</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$ctl00$ContentPlaceHolderDefault$cp_content$ucRegistroGastos_3$grvGastos','Sort$MontoMovimiento')">Monto Movimiento</a></th><th scope="col"><a...

CSS

div.container
{
    width: 100%;
    max-width: 918px;
    padding: 10px;
    margin: 0 auto;
    
    font-family: 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', Arial, Helvetica, Verdana, sans-serif;
    font-size: 13px;
}

div.userHeader
{
    width: 100%;
    padding: 0;
    border: none;
    overflow: hidden;
}

div.userHeader div.areaLabels
{
    float: left;
}

div.userHeader div.userLabels
{
    float: right;
}

div.userHeader div.title, div.userHeader div.value
{
    border: none;
    text-align: left;
    font-weight: bold;
    padding: 4px 8px;
    float: left;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

div.userHeader div.title
{
    color: #333;
    padding-left: 0;
}

div.userHeader div.value
{
    color: #666;
    background: #EDEDED;
    width: 360px;
    max-width: 360px;
    overflow: hidden;
}

table.navigation
{
    width: 100%;
    margin-top: 20px;
    border-spacing: 0;
    border: none !important;
}

table.navigation td
{
    color: #333;
    background: #EDEDED;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    padding: 3px 4px;
    border: 1px solid #aaa;
    cursor: pointer;
}

table.navigation td a
{
    color: #333;
    text-decoration: none;
    display: block;
    font-weight: bold;
}

table.navigation td:hover, table.navigation td.selected
{
    color: #000;
    font-weight: bold;
    background: #9DCAE3;
    border-color: #333;
}

table.navigation td.leftEdge
{
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

table.navigation td.leftEdge:hover
{
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
}

table.navigation td.rightEdge
{
    -webkit-border-top-right-radius: 6px;
   ...