JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    width: 350px;
    height: 350px;
    position: relative;
}

td {
    width: 70px;
    height: 70px;
    border: 1px solid #000;
    background: radial-gradient(at center, blue 45%, transparent 45%);
}

td:hover {background: radial-gradient(at center, #000 45%, #FFBF00 45%);}
tr:hover {background-color: #FFE592;}
td, td:hover:after {width: 70px;}

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