JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class = "msg"> change button color </h2>
<button class = "blue"> click me </button>

CSS

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

JavaScript

let btn = document.querySelector("button")
let msg = document.querySelector(".msg")

btn.addEventListener("click", () => {
	if (btn.classList.contains("blue")) {
  	btn.classList.remove("blue")
  	btn.classList.add("yellow")
    msg.textContent = "button changed to yellow" 
  } else {
  btn.classList.remove("yellow")
  btn.classList.add("blue") 
  	msg.textContent = "button changed to blue"
  } 
  })