JSFiddle - React, Tailwind, and code Playground

by Arpit09

HTML

<div id="change"></div>
<button id="button1">Button 1</div>
<button id="button2">Button 2</div>
<button id='play'>
Auto Play
</button>

CSS

#change {
width: 300px;
height: 100px;
background: rgba(0,0,0,1);
}
#button1, #button2 {
color: grey;
display: block;
}

JavaScript

change = document.getElementById("change");

button2 = document.getElementById("button2");
button2.addEventListener("click", function(){
  clearInterval(timer);
  clearInterval(timer1);
  change.style.background = "orange";
  button1.style.background = "orange";
  button2.style.background = "black";
});

button1 = document.getElementById("button1");
button1.addEventListener("click", function(){
  clearInterval(timer);
  clearInterval(timer1);
  change.style.background = "black";
  button1.style.background = "black";
  button2.style.background = "orange";
});

var timer
var timer1
play = document.getElementById("play");
play.addEventListener("click", function(){

timer = setInterval(function() { 
	change.style.background = "blue";
}, 2000);

timer1 = setInterval(function() { 
	change.style.background = "red";
}, 4000);
})