JSFiddle - React, Tailwind, and code Playground

HTML

<div id="field">
		<div  class="block"></div>
		<div  class="block"></div>
		<div  class="block"></div>
</div>

CSS

#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		border: 5px solid black;
}

.block {
	
		width: 100%;
		height: 33.33%;
		border: 1px solid black;
}

JavaScript

console.log('Everything GOOD');

		var $field = $('#field'),
			$block = $('.block'),
			len =$('#field >div').length;	
		var center = 128;
		var width = 127;
		var frequency = Math.PI * 2 / len;

		setInterval(Rainbow, 100);
				

				function Rainbow(){

						for (var i = 0; i < 255; i++) {

							

						var rValue = Math.sin(frequency * i + 2) * width + center;
						var gValue = Math.sin(frequency * i) * width + center;
						var bValue = Math.sin(frequency * i + 4) * width + center;

						var r = Math.floor(rValue),
							g = Math.floor(gValue),
							b = Math.floor(bValue);

						setInterval(addColor, 1500);


						function addColor() {
						$block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						$block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						$block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});	
						}

						console.log( i + "=i");

						}

				}