JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="main">

</div>

CSS

#main {
  height: 100%;
  width: 100%;
}

JavaScript

var main = document.getElementById('main');
var color = function() {
  var col = "red";
  return function() {
    col = (col === "red" ? "blue" : "red");
    return col;
  };
};

var nextColor = color();

function loop() {

  var timeoutId = setTimeout(function() {
    console.log('clearing', timeoutId)
    clearTimeout(timeoutId);
    main.style.background = nextColor();
    loop();
  }, 1000);

}

loop();