JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
        <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
        <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
        <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
        <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    </tbody>
</table>

CSS

.highlight {
    background: #7ea2c6;
    color: #FFF;
  }

td {
    padding: 20px;
}

JavaScript

$('td').mouseover(function(e) {
                    //Add hover colours on mouseover
                    var index, selector, parent;
                    index = ($(this).index() + 1);
     
                    parent = ($(this).parent('tr'));
                    $(parent).addClass("highlight");
                   

                    selector = "tbody td:nth-child(" + index + ")";
                    $(selector).addClass("highlight");



                }).mouseout(function(e) {
     
                        $('tr, td, p').removeClass("highlight");
                });