JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<table class='cuerpoDiario'>
    <tr>
        <td class='diariocol1'>C&oacute;digo   </td>
        <td class='diariocol2'>Cuenta   </td>
        <td class='diariocol3'>Debe     </td>
        <td class='diariocol4'>Haber    </td>
    </tr>
</table>
<div class='btnPDF' >Mayo1r</div>
<div class='btnExcel'>Mayor2</div>
<div class='btnScreen'>Mayor3</div>
<div class='btnSII'>Mayor4</div>

CSS

thead{
       color:white;
       background:#069;

    }
    .cuerpoDiario{
        border:1px solid #E6D7EF;
        border-radius: 5px 5px 0px 0px;
    }
    .filad1s{
        background-color: white;
        color: black;
        text-align:left;
    }
    .diariocol1{
        width:100px;
        text-align: center;
        border-radius: 5px 0 0 0;
        border-bottom: 1px solid #00c;
        border-top: 1px solid #00c;
        border-left: 1px solid #00c;
    }.diariocol2{
        width:260px;
        text-align: center;
        border-bottom: 1px solid #00c;
        border-top: 1px solid #00c;
    }.diariocol3{
        width:150px;
        text-align: center;
        border-bottom: 1px solid #00c;
        border-top: 1px solid #00c;
    }.diariocol4{
        width:150px;
        text-align: center;
        border-radius: 0 5px 0 0;
        border-bottom: 1px solid #00c;
        border-top: 1px solid #00c;
        border-right: 1px solid #00c;
    }.right{
        text-align: right;
    }

.btnPDF , .btnExcel, .btnScreen, .btnSII{
    cursor: pointer;
    padding: 50px;
    display: inline-block;
    background-color:green;
    margin:10px;
}