JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100px; height:100px; border:0px">
<div id="cvet1" style="background-color: rgb(0, 0, 0);"></div>
<div id="cvet2" style="background-color: rgb(0, 255, 0);"></div>
<div id="cvet3" style="background-color: rgb(0, 0, 255);"></div>
<div id="cvet4" style="background-color: rgb(255, 0, 0);"></div>
</div>

CSS

div {
border: 0px solid black;
width:50px;
height:50px;
float:left;
margin: auto;text-align: center;
}

JavaScript

function SquareColor(min,n) {
    this.r=0;
	this.g=0;
	this.b=0;
    this.cycle=0;
	this.min=min;
}

sc1 = new SquareColor(5);
sc2 = new SquareColor(4);
sc3 = new SquareColor(3);
sc4 = new SquareColor(2.5);

function ChangeColor(sc) {

switch(sc.cycle) {
			
			case(0): { // КРАСН
			if(sc.r<255) sc.r+=sc.min;
			if(sc.g>0) sc.g-=sc.min;
			if(sc.b>0) sc.b-=sc.min;
			if(sc.r >= 255 && sc.g <= 0 && sc.b <= 0) sc.cycle++;
            } break;

			case(1): { // ОРАНЖ
			if(sc.r<255) sc.r+=sc.min;
			if(sc.g>127) sc.g-=sc.min; else if(sc.g<127) sc.g+=sc.min;
			if(sc.b>0) sc.b-=sc.min;
			if(sc.r >= 255 && sc.b == 0) if(sc.g > 120 &&  sc.g < 130) sc.cycle++;	
			} break;
		
			case(2): { // ЖЁЛТ
			if(sc.r<255) sc.r+=sc.min;
			if(sc.g<255) sc.g+=sc.min;
			if(sc.b>0) sc.b-=sc.min;
			if(sc.r >= 255 && sc.g >= 255 && sc.b <= 0) sc.cycle++;
			} break;
				
	    	case(3): { // 3ЕЛЁН
			if(sc.r>0) sc.r-=sc.min;
			if(sc.g<255) sc.g+=sc.min;
			if(sc.b>0) sc.b-=sc.min;
			if(sc.r <= 0 && sc.g >= 255 && sc.b <= 0) sc.cycle++;
			} break;

			case(4): { // ГОЛУБ
			if(sc.r>1) sc.r-=sc.min;
			if(sc.g<255) sc.g+=sc.min;
			if(sc.b<255) sc.b+=sc.min;
			if(sc.r <= 0 && sc.g >= 255 && sc.b >= 255) sc.cycle++;
			} break;


			case(5): { // СИН
			if(sc.r>0) sc.r-=sc.min;
			if(sc.g>0) sc.g-=sc.min;
			if(sc.b<255) sc.b+=sc.min;
			if(sc.r <= 0 && sc.g <= 0 && sc.b >= 255) sc.cycle++;		
			} break;
		
			case(6): { // ФИОЛЕТ
			if(sc.r<255) sc.r+=sc.min;
			if(sc.g>0) sc.g-=sc.min;
			if(sc.b<255) sc.b+=sc.min;
			if(sc.r >= 255 && sc.g <= 0 && sc.b >= 255) sc.cycle=0;		
			} break;		
			
			}

return 'rgb(' + sc.r + ',' + sc.g + ',' + sc.b + ')';
}

function zapusk1(){
document.getElementById("cvet1").style.backgroundColor=ChangeColor(sc1);
}
function zapusk2(){
document.getElementById("cvet2").style.backgroundColor=ChangeColor(sc2);
}
function zapusk3(){
document.getElementById("cvet3").style.backgroundColor=ChangeColor(sc3);
}
function...