JSFiddle - React, Tailwind, and code Playground

by Maycon Brito

HTML

<br><div id="divTabela">
    <br>
        <div align="left">
            &nbsp;<strong>1</strong>&nbsp;<a class="link_submit" id="lkPaginacao" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/pesquisar/30">2</a>&nbsp;<a class="link_submit" id="lkPaginacao" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/pesquisar/60">3</a>&nbsp;<a class="link_submit" id="lkPaginacao" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/pesquisar/30">&gt;</a>&nbsp;&nbsp;<a class="link_submit" id="lkPaginacao" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/pesquisar/6960">Último</a></div><table id="tabelainfo" name="tabelainfo"
style="width:200px;" align="center" 
class=" bordasimples ">
<thead>
<tr id="titulotabela">
<th>Status</th><th>Número</th><th>Assunto</th><th>Setor</th><th>Usuário</th><th>Analista</th><th>Urgência</th><th>Prioridade</th></tr>
</thead>
<tbody>
<tr id="corpotabela">
<td align="center"><div id="div_link"><a href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/alterar/15069" title="Projeto" class=""><img src="/fwsibe/assets/imagens/controle_mudanca/projeto.png" style="border:0;"></a></div></td><td align="center"><div id="div_link"><a name="15069" class="sem_sublinhado" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/alterar/15069">15069</a></div></td><td align="center"><div id="div_link"><a name="Pesagem De Lotes Destinados A Duas Volumetrias" class="sem_sublinhado" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/alterar/15069">Pesagem De Lotes Destinados A Duas Volumetrias</a></div></td><td align="center"><div id="div_link"><a name="Pesagem" class="sem_sublinhado" href="HTTP://192.168.101.151/fwsibe/informatica/controle_mudanca/ControleMudancaInfo/alterar/15069">Pesagem</a></div></td><td align="center"><div...

CSS

/*Esta definição de body é aplicável apenas ao datapicker*/
body {
    font-size: 62.5%;
    font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

#conteudo {
    padding-top: 0px;
    font-size: 13px;
    text-align: justify;
    font-family: Calibri;
    /*	font-family: Arial, Helvetica, sans-serif;*/
    color:#083c06;
}

#tabelainfo {
    padding-top: 0px;
    font-size: 12px;
    font-family: Calibri;
    text-align: justify;
    color: #083c06;
    text-decoration: none;
}

#divCentral{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
}

.overlay{
    background: #ECF1E9;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

.loader{
    /*    margin-top: 50%;
        margin-bottom: 50%;*/
    /*vertical-align: middle;*/
    align: center; 

}

#conteudocalibri {
    padding-top: 0px;
    text-align: left;
    font-family: Calibri;
    font-size: 13px;
    color:#0D4820;/*#1C750D;*/
}
#tabela {
    padding-top: 0px;
    font-size: 12px;
    text-align: left;
    font-family: Calibri;
    /*width: 750px;*/
    padding: 3px;
    /*	font-family: Arial, Helvetica, sans-serif;*/
}
#obs {
    padding-top: 0px;
    font-size: 12px;
    text-align: left;
    font-family: Calibri;
    /*	font-family: Arial, Helvetica, sans-serif;*/
}
.pesq {
    text-decoration: none;
    font-family: Calibri;
}

#tabelaprod {
    padding-top: 0px;
    font-size: 13px;
    text-align: justify;
    font-family: Calibri;
    color:#0D4820;/*#1C750D;*/
}

#tabelaesq {
    font-size: 12px;
    /*	text-align: justify;*/
    font-family: Calibri;
    top: 150px;
    clip: rect(1px,auto,auto,auto);
    color: #0A5A18;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin: 0px;
    float: none;
    border-top-width: 0px;
    border-right-width:...