JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-bordered">
    <tr>
        <td align="center" class="info_table">
            <div onclick="invDir(0);" id="gpio0">-</div>
        </td>
        <td align="center" class="info_table">
            <div id="gpio1">-</div>
        </td>
        <td align="center" class="info_table">
            <div id="gpio2">-</div>
        </td>
        <td align="center" class="info_table">
            <div id="gpio3">-</div>
        </td>
        <td align="center" class="info_table">
            <div id="gpio4">-</div>
        </td>
    </tr>
</table>

CSS

.info_table {
    width: 5%;
}
.info_table:hover {
    background-color: #f1c40f !important;
}
table td:hover {
    background-color: #000;
}