JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td><a href="http://www.google.com/"><div>Cell 1<br>
                second line</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 2</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 3</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 4</div></a></td>
        </tr>
        <tr>
            <td><a href="http://www.google.com/"><div>Cell 1<br>
                second line</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 2</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 3</div></a></td>
            <td><a href="http://www.google.com/"><div>Cell 4</div></a></td>
        </tr>
    </tbody>
</table>

CSS

tr {border: 3px solid black; padding: 0px}
td {width: 200px; height: 100%; padding: 0px; overflow: hidden}
td a {margin: -1em; padding: 1em; display: block; border: 1px solid black;}
td a:hover {background-color: yellow;}