JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">A</div>

<div id="b">B</div>

<div>
  <button id="randomize">Randomize</button>
  <button id="reveal">Reveal</button>
  <label for="delayField">Delay: </label>
  <input type="number" id="delayField" value="0.1">
</div>

CSS

#a, #b {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #f00;
  margin-right 20px;
  margin-bottom: 20px;
  font-size: 40px;
  line-height: 100px;
  text-align: center;
  color: white;
  cursor: pointer;
}

JavaScript

let delays;

let doRandomize = function () {
	delays = {a: 0, b: 0};
	let testLetter = 'ab'[Math.round(Math.random())];
  delays[testLetter] = delayField.valueAsNumber;
  a.textContent = 'A';
  b.textContent = 'B';
}

randomize.onclick = doRandomize;
doRandomize();

onTestClick = function () {
	let delay = delays[this.id] * 1000
  setTimeout(() => this.style.background = '#0fe', delay);
  setTimeout(() => this.style.background = '', 500)
}

a.onmousedown = b.onmousedown = onTestClick;

reveal.onclick = function () {
	a.textContent = delays.a;
  b.textContent = delays.b;
}