JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>test</td>
        </tr>
        <tr>
            <td>2</td>
            <td>baouh</td>
        </tr>
        <tr>
            <td>3</td>
            <td>ploum</td>
        </tr>
    </tbody>
</table>

CSS

table tbody tr {
    cursor: pointer;
}

table tbody tr td {
    padding-left: 10px;
}

table tbody tr:hover td:first-child {
    background: linear-gradient(90deg, #009bcd 20%, white 10%);
}