JSFiddle - React, Tailwind, and code Playground

HTML

<table class="my-table">
	<tr>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
	</tr>
	<tr>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
	</tr>
	<tr>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
		<td><span></span></td>
	</tr>
</table>

CSS

.my-table{
	border-collapse:collapse;
}
.my-table td{
	background:#ddd;
	padding:5px;
}
.my-table td span{
	background:#ccc;
	display:block;
	height:50px;
	width:50px;
}
.my-table tr:hover td,
.my-table .hover{background:#fc0;}
.my-table td:hover span{background:#333;}

JavaScript

jQuery(function(){
	initTableAnimation();
});

function initTableAnimation() {
	var table = jQuery('.my-table');
	var tableRow = table.find('tr');
	var tableCell = tableRow.find('td');
	
	tableCell.hover(function() {
		var current = jQuery(this).index();
		tableRow.each(function() {
			jQuery(this).children().eq(current).toggleClass('hover');
		})
	})
}