JSFiddle - React, Tailwind, and code Playground

HTML

<table width="300px"> 
    <tr class="tr1">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr class="tr2">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr class="tr1">
        <td>5</td>
        <td>6</td>
    </tr>
    <tr class="selected">
        <td>7</td>
        <td>8</td>
    </tr>
    <tr class="tr1">
        <td>9</td>
        <td>0</td>
    </tr>
</table>

CSS

.tr1{
background-color: #e9e9e9;
}
.tr2{
background-color: #ffffff;
}
.selected{
    
    color:#000000;
    background-color: #ffefd5;  
}

.linghtbar{
color:#000000;
    background-color: #d9e9ff;    

}

JavaScript

if (typeof (jQuery) === 'undefined'){
                alert('jQuery Library NotFound.');}
                try {$(function () {$('table tr').hover(function () {
                $(this).addClass('linghtbar');},
                function () {$(this).removeClass('linghtbar');
                });});}catch (err) {};