JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
</div>

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

CSS

#foo {
  background-color: orange;
  width: 100px;
  height: 100px;
}

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

JavaScript

var f = document.getElementById('foo');
var btn = document.getElementById('btn');
var puk = false;
btn.onclick = function() {
  if (puk) {
    f.style.backgroundColor = 'orange';
    puk = false;
  } else {
    f.style.backgroundColor = 'red';
    puk = true;
  }
}