JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <table class="table">
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>AAAAAAAAAAAAAAAAAAA</td>
        </tr>
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>DDDDDDDDDDDDDDDDDDDD</td>
        </tr>
        
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>DDDDDDDDDDDDDDDDDDDD</td>
        </tr>
        
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>DDDDDDDDDDDDDDDDDDDD</td>
        </tr>
        
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>DDDDDDDDDDDDDDDDDDDD</td>
        </tr>
        
        <tr class="row">
            <td><div class="checkbox"></div></td>
            <td>DDDDDDDDDDDDDDDDDDDD</td>
        </tr>
    </table>
</div>

CSS

.wrapper{
    overflow-y: auto;
    /*height: 100px;*/
    background-color: green;
}
.row:hover{
    background-color: #ddd;
    cursor: pointer;
}
.checkbox{
    height: 12px;
    width: 12px;
    background-color: #fff;
    border: 1px solid #555;
    visibility: hidden;
    margin: 2px 5px;
}
.row:hover .checkbox{
    visibility: visible;
}

JavaScript

$('.row').click(function(){
      alert('clicked'); 
});