JSFiddle - React, Tailwind, and code Playground

by Craig Walker

HTML

<section>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</section>

CSS

section {
  display: flex;
  justify-content: space-around;
  width: 50%;
}
div {
  margin-left: 50px;
  width: 5px;
  height: 50px;
  background: black;
}

#one {
  animation: blink1 1s infinite;
  opacity: 0;
}

#two {
  animation: blink2 2s infinite;
  opacity: 1;
}

#three {
  animation: blink1 1s infinite;
  opacity: 0;
}

@keyframes blink1 {
  50% {
    opacity: 1;
  }
}
@keyframes blink2 {
  90% {
    opacity: 0;
  }
}

JavaScript

var three = document.getElementById('three');

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function setColor() {
	three.style.background = getRandomColor();
}

three.addEventListener("animationiteration", setColor);