JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Так-тикс</title>
<style>

table{
border-collapse: collapse;
}

div{
box-sizing:border-box;
height:40px;
width:40px;
background:#0063ef;
border-radius:50px;
}

td:hover{
background:#ffcc00;
}

td:hover div{
background:black;
}

tr:hover{
background:#ffe581;
}


</style>
</head>

<body>

<table border="1" cellpadding="5px">

<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>
<tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>


</table>

</body>
</html>