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

body{
	margin:8px;
}
table{
	border-collapse:collapse;
	overflow:hidden;
}
td{
	border:1px solid #000;
    position:relative;
}
td:before{
	content:"";
	display:block;
	width:40px;
	height:40px;
    margin:10px;
	border-radius:20px;
	background:#0063ef;
}
td:hover{
	background:#ffcc00;
    display: block;
    border: none;
}
td:hover:before{
	background:#000;	
}
tr:hover{
	background:#ffe581;
}
td:hover:after{
	content:"";
	position:absolute;
	display:block;
	width:100%;
	height:9000px;
    top:4500px;
    margin:-9000px 0;
	background:#ffe581;
	z-index:-1;
}
td:nth-child(3){
    width:80px;
}
td:nth-child(5){
    width:160px;
}