JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="functionary()">
  <h1> Traffic Light </h1>
  <!-- -->
  <table>
    <!-- -->
    <tr>
      <td>
        <div id="redL"></div>
        <div id="yellowL"></div>
        <div id="greenL"></div>
      </td>
    </tr>
  </table>
</body>

CSS

#redL {
  height: 50px;
  width: 50px;
  margin: 1px auto;
  background-color: #7A0000;
  border-radius: 50px;
  border: solid 1px black;
  padding: 1px;
}

#yellowL {
  height: 50px;
  width: 50px;
  margin: 1px auto;
  background-color: #7A5C00;
  border-radius: 50px;
  border: solid 1px black;
  padding: 1px;
}

#greenL {
  height: 50px;
  width: 50px;
  margin: 1px auto;
  background-color: #008000;
  border-radius: 50px;
  border: solid 1px black;
  padding: 1px;
}

table {
  /* Doesn't need dashes */
  height: 180px;
  width: 80px;
  background-color: #000000;
  border: 1px #000000;
  text-align: center;
  margin-left: 50%;
  /* makes margin right 50% */
  padding: 1px;
}

h1 {
  text-align: center;
  padding: 1px;
}

JavaScript

var time = 5;

function functionary() {
  var red = document.getElementById('redL')
  var yellow = document.getElementById('yellowL')
  var green = document.getElementById('greenL')
  var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
  if (time == 5) {
    red.style.background = Colours[0]; // May need spacebar between index number
    yellow.style.background = Colours[4];
    green.style.background = Colours[5];
    time = 1;
  } else if (time == 2 || time == 4) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[1];
    green.style.background = Colours[5];
  } else if (time == 3) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[4];
    green.style.background = Colours[2];
  }
  time += 1;
};
setInterval(function() {
  functionary();
}, 3000);