JSFiddle - React, Tailwind, and code Playground

HTML

<div id="col">

</div>

CSS

#col {
  width: 100px;
  height: 100px;
  background-color: green;
}

JavaScript

const el = document.getElementById('col');
let iterator = next();

function* next() {
    const arr = ["green", "blue", "red", "orange"];
    for (var i = 0; i <= arr.length;) {
      yield arr[i++];
    }
  }
  (function newBackground() {
    let color = iterator.next().value;
    if (color) {
      el.style.background = color;
      setTimeout(newBackground, 1000);
    }
  }());