JSFiddle - React, Tailwind, and code Playground

HTML

<button>click me</button>

CSS

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

.item {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: red;
  transition: transform 0.5s;
  position: absolute;
}

.hidden {
  transform: scale(0);
}

JavaScript

document.body.insertAdjacentHTML('beforeend', Array.from({ length: 50 }, () => {
  const left = Math.random() * 100 | 0;
  const top = Math.random() * 100 | 0;

  return `<div class="item hidden" style="left: ${left}%; top: ${top}%"></div>`;
}).join(''));

document.querySelector('button').addEventListener('click', () => {
  document.querySelectorAll('.item').forEach(n => n.classList.toggle('hidden'));
});