<div class="confetti-container"></div>

.confetti-container {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ff69b4;
  border-radius: 50%;
  animation: confetti 2s infinite;
}

@keyframes confetti {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

const confettiContainer = document.querySelector('.confetti-container');

for (let i = 0; i < 100; i++) {
  const confetti = document.createElement('div');
  confetti.classList.add('confetti');
  confetti.style.left = `${Math.random() * window.innerWidth}px`;
  confetti.style.top = `${Math.random() * window.innerHeight}px`;
  confettiContainer.appendChild(confetti);
}