JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
</div>

<button id="btn">button</button>

CSS

.foo, .bar {
  width: 100px;
  height: 100px;
}

.foo {
  background-color: orange;
}


.bar {
  background-color: cyan;
}

.foo:hover {
  background-color: red;  
}

JavaScript

var f = document.querySelector('.foo');
var btn = document.getElementById('btn');
var puk = true;

btn.onclick = function() {
  if (puk) {
    f.classList.add('bar');
    puk = false;
  } else {
    f.classList.remove('bar');
    puk = true;
  }
}