JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        <table>
                <tr>
                        <td>1.1</td>

                        <td>1.2</td>

                        <td>1.3</td>

                        <td>1.4</td>

                        <td>1.5</td>

                </tr>
                <tr>
                        <td>2.1</td>

                        <td>2.2</td>

                        <td>2.3</td>

                        <td>2.4</td>

                        <td>2.5</td>

                </tr>
                <tr>
                        <td>3.1</td>

                        <td>3.2</td>

                        <td>3.3</td>

                        <td>3.4</td>

                        <td>3.5</td>

                </tr>
                <tr>
                        <td>4.1</td>

                        <td>4.2</td>

                        <td>4.3</td>

                        <td>4.4</td>

                        <td>4.5</td>

                </tr>
        </table>
</div>

CSS

.container { position: relative; }

tr:hover { background: #fcc; }

td, td:hover:after { width: 50px; }

td:hover {
    background: #ffc;
}

td:hover:after {
    content: '';    
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #cfc;
    z-index: -1;
}