JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://markdalgleish.com/projects/stellar.js/js/stellar.js"></script>
<div class="confetti-layer">
  
  <span class="confetti-pixel"></span>
  <span class="confetti-pixel"></span>
  <span class="confetti-pixel"></span>
  
</div>

CSS

.confetti-pixel {

  display: inline-block;
  animation: 10s confettiDrop ease-in-out infinite alternate;
  border-radius:50%;
  width: 2.5%;
  margin: 8% 2.5% 0;
  padding-bottom: 2.5%;
  animation-delay: (10s * 2 / -3);
  background:black;
}

.confetti-layer {

  width: 100%;
  height: 100%;
  text-align: center;
}


@keyframes confettiDrop {
  0% {
    transform: none;
  }
}

JavaScript

$(function() {
  makeConfetti(3);
  
  $('.confetti-pixel').each(function() {
    var x = (Math.random()*200) - 100;
    var y = (Math.random()*200) - 100;
    $(this).css({'transform': 'translateX('+x+'%) translateY('+y+'%)'});
  });
});

function makeConfetti(num) {
  $('.confetti-layer').append(new Array(num + 1).join('<span class="confetti-pixel"></span>'));
}