JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
	<tr>
		<td></td>
		<td>Banana</td>
		<td>Orange</td>
		<td>Plum</td>
	</tr>
	<tr>
		<td>Banana</td>
		<td>1:1</td>
		<td>1:2</td>
		<td>1:3</td>
	</tr>
	<tr>
		<td>Orange</td>
		<td>2:1</td>
		<td>1:1</td>
		<td>1,5:1</td>
	</tr>
	<tr>
		<td>Plum</td>
		<td>1:3</td>
		<td>2:1</td>
		<td>1:1</td>
	</tr>
</table>

CSS

td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}