JSFiddle - React, Tailwind, and code Playground

HTML

<table class="testmunja">
    <thead>
        <tr>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        <tr class="test">
            <td>agent 1</td>
            
        </tr>
        <tr class="test">
            <td>agent 2</td>
        </tr>
        <tr class="test">
            <td>agent 3</td>
        </tr>
        <tr class="test">
            <td>agent 4</td>
        </tr>
        <tr class="test">
            <td>agent 5</td>
        </tr>
    </tbody>
</table>

CSS

/* 2 to 10 lines are only for easier focus*/
table, td, tr, th { 
    border: 1px dotted gray; 
    border-spacing: 0;
    border-collapse: collapse;
}

table {
    width: 50%;
}

.test {
    cursor: pointer;
}

tbody:hover > .test { 
    background: green;
}