JSFiddle - React, Tailwind, and code Playground

HTML

<div class='square-box'>
  TEST BOX
</div>

CSS

.square-box {
  width: 200px;
  height: 200px;
  line-height: 200px;
  cursor: pointer;
  background-color: #CCC;
  text-align: center;
}

JavaScript

$(document).ready(function() {
	$('.square-box').mouseenter(function() {
		$(this).animate({
			background-color: '#AAAAAA'
		}, 1000);
	});
	$('.square-box').mouseleave(function() {
		$(this).animate({
			background-color: '#CCCCCC'
		}, 1000);
	});
});