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;
    display: inline-block;  /* чтобы сработал overflow, можно заменить на display: block + float */  
    position:relative;
}
td {
	border:1px solid #000;
}
td:before{
	content:"";
	display:block;
	width:40px;
	height:40px;
    margin:10px;
	border-radius:20px;
	background:#0063ef;
}
td:hover{
	background:#ffcc00;	
}
td:hover:before{
	background:#000;	
}
tr:hover{
	background:#ffe581;
}
td:hover:after, :hover ~ td:after {
	content:"";
	position:absolute;
	display:block;
	width:100%;
    height: 100%;
    top:0;
	background:#ffe581;
	z-index:-1;
}
:hover ~ td:after {
    background: #fff;    
}
td:nth-child(3){
    width:80px;
}
td:nth-child(5){
    width:160px;
}