JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square-1">Auto</div>
<div id="square1">1</div>
<div id="square0">2</div>
<div id="square3">Off</div>
<div id="square2" class="s1"></div>

CSS

#square1,#square3,#square0,#square-1 {
    width: 60px;
    height: 60px;        
   
    left: 0;
    top: 0;
    background: blue;
    cursor: pointer;
}

#square3 { background: yellow }
#square0 { background: cyan}
#square-1 { background: red}

#square2 {
    position: absolute;
        width: 100px;
    height: 100px;        
    position: absolute;
    left: 150px;
    top: 150px;    
    background: red;
   
    
}
.s1 {
    display: none;
}
.s2 {
    display: block;
}

.s3 {
     -moz-transition: all 1s;
     -moz-transform: scale(0.5); 
}

JavaScript

$("#square1").on("click", function() {
    $("#square2").removeClass("s1").removeClass("s3").addClass("s2");
})
$("#square3").on("click", function() {
    $("#square2").removeClass("s2").removeClass("s3").addClass("s1");
})
$("#square0").on("click", function() {
    $("#square2").removeClass("s2").removeClass("s1").addClass("s3");
})
 
    $("#square-1").on("click", function() {
$("#square2").removeClass("s1").removeClass("s3").addClass("s2");
setTimeout(function() {
$("#square2").removeClass("s2").removeClass("s1").addClass("s3");
}, 50);    
    })