JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html lang="ro"> 
<head> 
<link href="my.css" type="text/css" rel="stylesheet">
<script type="text/javascript"  src="jquery-1.11.0.js"></script>
<script src="Joculet.js" type="text/javascript"> </script>

<meta charset="utf-8">
<title> Joculet </title>
 </head>
 
<body>
<div id ='tot'>
<button type='button' class='cls1' id='id1'></button>

<button type='button' class='cls2' id='id2'></button>

<button type='button' class='cls3' id='id3'></button>

<button type='button' class='cls4' id='id4'></button>

<button type='button' id='start'>Click Me!</button> 
</div>



</body>
</html>

CSS

.tot{
	position: absolute;
	width: 100%;
	height: 100%;
	 
	}
	
.cls1{
	position: absolute;
	background-color: red;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	 
   }
 
.cls2{
	position: absolute;
	background-color: yellow;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-left: 17%;
	 
   }

.cls3{
	position: absolute;
	background-color: #00FF00;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-top: 12%;
	 
   }

.cls4{
	position: absolute;
	background-color: #3090C7;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-left: 17%;
	margin-top: 12%;
	
   }
   
#start{
	position: absolute;
	margin-left: 12%;
	margin-top: 23%;
	
	}
	
.cls12{
	position: absolute;
	background-color: #C24641;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	
	}

.cls22{
	position: absolute;
	background-color: #FFFFCC;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-left: 17%;
	 
   }
   
.cls32{
	position: absolute;
	background-color: #6AFB92;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-top: 12%;
	 
   }
   
.cls42{
	position: absolute;
	background-color: #893BFF;
	width: 12%;
	height: 12%;
	border: 2px solid black;
	margin-left: 17%;
	margin-top: 12%;
	
   }

JavaScript

$(document).ready(function(){
	
		$('#start').click(function(){
		
			game();
		})
		
		function game(){
		
			var ordine = new Array();
			
			for(var t = 1; t <= 8; t++){
			
				var y = 0;
				
				for(var k = 0; k < t; k++){
				
				var x = Math.floor((Math.random() * 4) + 1);
				ordine[y++] = x;
				change1(x);
				setTimeout(change2(x), 500);
				}
			}
			
		}
		
		function change1(y){
		
			var z = 'cls' + y;
			var t = 'cls' + y + 2;
			$("." + z).removeClass(z).addClass(t);
			
		}
		
		function change2(y){
			var z = 'cls' + y + 2;
			var t = 'cls' + y;
			$("." + z).removeClass(z).addClass(t);
			
		}

		
		
		
	})