JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="boxes"></div>

CSS

body {
  width: 440px;
}

.box {
  width: 50px;
  height: 50px;
  margin: 1px;
  background: red;
  float: left;
  transition: 0.5s ease;
}

.selected {
  background: blue;
  transform: rotate(90deg);
}

JavaScript

var boxSize = 8;

var str = '';
for(var i=0; i<boxSize*boxSize; i++){
	str += '<div class="box"></div>';
}
jQuery('.boxes').html(str);

jQuery('.box').mouseenter(function(){
	var index = jQuery(this).index();
  var tab = tab = [index-1,index+1,index-boxSize,index+boxSize];
  if(index%boxSize == 7){
  	tab.splice(1,1);
  } else if(index%boxSize == 0){
  	tab.splice(0,1);
  }

  tab.map(function(el){
    jQuery('.box:nth-child('+(el+1)+')').addClass('selected');
  });
});

jQuery('.box').mouseleave(function(){
	jQuery('.selected').removeClass('selected');
});