JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div class="hero">
</div>

CSS

* { box-sizing: border-box; }
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  opacity: 0.5;
}
.dot {
  background-color: lightgray;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 1s;
  opacity: 0.5;
}
.dot.highlight {
  background-color: crimson;
}

JavaScript

const hero = document.querySelector('.hero');
const dots = [];

for (let i = 0; i < 1000; i++) {
  const dot = document.createElement('div');
  dot.classList.add('dot');
  dots.push(dot);
  hero.appendChild(dot);
}


function highlightRandom() {
  const index = Math.floor(Math.random() * dots.length);
  const dot = dots[index];
  dot.classList.add('highlight');
  setTimeout(() => {
    dot.classList.remove('highlight');
  }, 10000);
}

setInterval(() => {
  highlightRandom();
  highlightRandom();
  highlightRandom();
  highlightRandom();
  highlightRandom();
}, 100);