JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="change-me" class="green-background">
<button onclick="changeBackground()">Change color</button>
</div>
</body>

CSS

.green-background {
  background: green;
}

.blue-background {
  background: blue;
}

JavaScript

const changeBackground = () => {
		let target = document.getElementById("change-me")
		target.classList = target.classList.contains("blue-background") ? ["green-background"]:["blue-background"]; 
    let newDiv = document.createElement("div");
    let color = Math.random() > 0.5 ? "green-background" : "blue-background";
    newDiv.classList.add(color)
    newDiv.style.height = "20px"
    newDiv.style.width = "100%"
    setTimeout(()=>document.body.append(newDiv),1000)
}