JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pause_button"></div>
<div id="my_box"></div>

CSS

#pause_button {
    width: 50px;
    height: 50px;
    background-color: #AF0;
    transition: 2000ms;
}
#pause_button:hover {
    box-shadow: 0 0 0 3px #000;
    cursor: pointer;
}
#my_box {
    width: 50px;
    height: 50px;
    background-color: #00F;
    transform-origin: right top;
    transition: 1s ease-in-out;
}

JavaScript

var p = document.getElementById("pause_button");
var x = document.getElementById("my_box");
var i = 0; // i==0 <=> !i
var j = 0;
var t;

function myShift() {
    if (!j) {
        x.style.transform = "rotate(-180deg)";
        j = 1;
    } else {
        x.style.transform = "rotate(0)";
        j = 0;
    }
    if (!i) t = setTimeout(myShift, 3020);
}

function myColor() {
    if (!i) {
        this.style.backgroundColor = "#F43";
        i = 1;
        clearTimeout(t);
    } else {
        this.style.backgroundColor = "#AF0";
        i = 0;
        myShift();
    }
}

p.onclick = myColor;
myShift();