JSFiddle - React, Tailwind, and code Playground

HTML

<button id="clickme">Click Me!</button>
<div id="react1">1</div>
<div id="react2">2</div>
<div id="react3">3</div>

CSS

div {
  font-size: 4em;
}
.blink {
  color: red;
}

JavaScript

function blinkIt(element) {
	element.classList.add('blink');
  setTimeout(() => { element.classList.remove('blink'); }, 1000);
}
document.getElementById('clickme').addEventListener('click', () => {
	console.clear();
	let order = ['react1', 'react2', 'react3'];
  let first = order.splice(Math.floor(Math.random() * order.length), 1)[0];
  let second = order.splice(Math.floor(Math.random() * order.length), 1)[0];
  let third = order[0];
  console.log(first, second, third);
  setTimeout(blinkIt.bind(null, document.getElementById(first)), 16);
  setTimeout(blinkIt.bind(null, document.getElementById(second)), 33);
  setTimeout(blinkIt.bind(null, document.getElementById(third)), 282);
})