JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row col-md-4 col-md-offset-4">
    <button class="btn blue" id="btn">I'm a Button</button>
  </div>

CSS

.red{
  background: red;
  color: white;
}
.red:focus,
.red:hover{
  background: red;
  color: white;
}
.blue{
  background: blue;
  color: white;
}
.blue:focus,
.blue:hover{
  background: blue;
  color: white;
}
body{
  margin: 40px ;
}
.green{
  background: rgb(89, 172, 76);
  color: white;
}
.green:focus,
.green:hover{
  background: rgb(89, 172, 76);
  color: white;
}

JavaScript

$(function(){

  $("#btn").on("click", function(){
    $(this).toggleClass("blue");
    $(this).toggleClass("red");
  });

  $("#btn").hover(function(){
    $(this).toggleClass('green')
  });
});