JSFiddle - React, Tailwind, and code Playground

HTML

<button class="red btn" type="button" id="btn"  >Click Me to toggle class</button>

CSS

.btn{
  padding:20px 10px;
  color:white;
  border:none;
}

.red{
  background-color:red;
}

.green{
   background-color:green;
}

JavaScript

function changeColor() {
    this.classList.toggle('red');
    this.classList.toggle('green');
}

 document.querySelector('#btn').addEventListener('mouseenter', changeColor);
 document.querySelector('#btn').addEventListener('mouseleave', changeColor );