JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="animation">Test</canvas>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color:#212025;
  color: #ffe;
}

#animation {
    position:fixed;
    top:0px;
    left:0px;
}

#box {
    background:#ffe;
    width:400px;
    height:400px;
}

JavaScript

window.onload = function () {
  var COLORS, Confetti, NUM_CONFETTI, PI_2, confetti, context, drawCircle, i, range, resizeWindow, xpos, ctx;

  NUM_CONFETTI = 350;

  COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

  PI_2 = 2 * Math.PI;
  
  context = document.getElementById('animation').getContext("2d");

  window.w = 0;

  window.h = 0;

  resizeWindow = function() {
    window.w = context.canvas.width = window.innerWidth;
    window.h = context.canvas.height = window.innerHeight;
  };

  window.addEventListener('resize', resizeWindow, false);

  range = function(a, b) {
    return (b - a) * Math.random() + a;
  };

  drawCircle = function(x, y, r, style) {
    context.beginPath();
    context.arc(x, y, r, 0, PI_2, false);
    context.fillStyle = style;
    return context.fill();
  };

  xpos = 0.5;

  document.onmousemove = function(e) {
    return xpos = e.pageX / w;
  };

  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
  })();

  Confetti = (function() {
    function Confetti() {
      this.style = COLORS[~~range(0, 5)];
      this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
      this.r = ~~range(2, 6);
      this.r2 = 2 * this.r;
      this.replace();
    }

    Confetti.prototype.replace = function() {
      this.opacity = 0;
      this.dop = 0.03 * range(1, 4);
      this.x = range(-this.r2, w - this.r2);
      this.y = range(-20, h - this.r2);
      this.xmax = w - this.r;
      this.ymax = h - this.r;
      this.vx = range(0, 2) + 8 * xpos - 5;
      return this.vy = 0.7 * this.r + range(-1, 1);
    };

    Confetti.prototype.draw = function() {
      var _ref;
      this.x += this.vx;
      this.y += this.vy;
     ...