JSFiddle - React, Tailwind, and code Playground

by Adam Victor Brandizzi

HTML

<HTML>
<BODY>
<style type="text/css">
body {
  font: 75%/1.6 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
table {
  border-collapse: collapse;
  width: 35em;
  border: 1px solid #666;
}
thead {
  background: #ccc url(https://www.devfuria.com.br/html-css/tabelas/bar.gif) repeat-x left center;
  border-top: 1px solid #a5a5a5;
  border-bottom: 1px solid #a5a5a5;
}
tr:hover {
  background-color:#3d80df;
  color: #fff;
}
thead tr:hover {
  background-color: transparent;
  color: inherit;
}
tr:nth-child(even) {
    background-color: #edf5ff;
}
th {
  font-weight: normal;
  text-align: left;
}
th, td {
  padding: 0.1em 1em;
}
,two-columns {
  display: inline-grid;
  grid-template-columns: 50% 50%;
}
</style>
    <div class="two-columsn">
        <table id="Programa1">
            <thead>
                <tr>    
                    <th></th> 
                    <th colspan="3">Programa</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Saude</td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td></td>
                    <td></td>
                </tr> 
            </tbody>
        </table>
        <table id="Programa2">
            <thead>
                <tr>    
                    <th></th> 
                    <th colspan="3">Programa</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Saude</td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td></td>
                    <td></td>
                </tr> 
            </tbody>
        </table>
    </div>
</BODY>
</HTML>