JSFiddle - React, Tailwind, and code Playground

HTML

<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>

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 x = Math.floor((Math.random() * 4) + 1);
            change1(x);
	    }

	    function change1(y) {
	        var z = 'cls' + y;
	        var t = 'cls' + y + 2;
	        $("." + z).removeClass(z).addClass(t);
            setTimeout(function() { change2(y); }, 500);
	    }

	    function change2(y) {
	        var z = 'cls' + y + 2;
	        var t = 'cls' + y;
	        $("." + z).removeClass(z).addClass(t);
            game();
	    }
	});