JSFiddle - React, Tailwind, and code Playground

HTML

<div class="abc">1</div>
<div class="abc">2</div>
<div class="abc">3</div>
<div class="abc">4</div>

CSS

.abc{width:150px;height:150px;float:left;}

JavaScript

var dlC = [
        'rgb(233, 147, 26)',
        'rgb(22, 145, 190)',
        'rgb(22, 107, 162)',
        'rgb(27, 54, 71)'
	];
	var dlH = [
        '#000',
        'rgb(22, 145, 190)',
        'rgb(22, 107, 162)',
        'rgb(27, 54, 71)'
	];


	$('.abc').each(function( i ) {
       $(this).css({backgroundColor : dlC[i] })
              .on("mouseenter mouseleave",function( e ) {
                  $(this).css({backgroundColor : e.type=="mouseenter" ? dlH[i] : dlC[i] });
              });
	});