JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
    <tr>
        <td>cell 1.1</td>
        <td>cell 1.2</td>
    </trd>
    <tr>
        <td>cell 2.1</td>
        <td>cell 2.2</td>
    </tr>
</table>

CSS

td {
    margin: 5px;
    padding: 5px;
    background-color: #CCC;
    border: solid 3px white;
}

JavaScript

var table = document.getElementById("myTable");

console.log(table);

table.addEventListener('mouseover', function(event) {
    var target = event.target;
    if (target.nodeName == 'TD') {
        target.style.backgroundColor = '#FFF';
    }
});

table.addEventListener('mouseout', function(event) {
    var target = event.target;
    if (target.nodeName == 'TD') {
        target.style.backgroundColor = '#CCC';
    }
});