JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

function init(){

    var canvas = document.getElementById('canvas'),
        stage = new createjs.Stage(canvas);

    var colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548'
    ];
  
    for (i=0;i<300;i++){
      var particleSize = Math.floor(Math.random() * 14) + 4;
      
      var particle=new createjs.Shape();
      particle.graphics.beginFill(colors[Math.floor(Math.random() * 17) + 1 ]).drawRect(
        Math.floor(Math.random() * 101) - 50 + canvas.width/2 - (particleSize/2),  // x
        Math.floor(Math.random() * 101) - 50 + canvas.height/2 - (particleSize/2),  // y
        particleSize, // w
        particleSize  // h
      );
      
      stage.addChild(particle);
      stage.update();
      
      var timeMove = Math.floor(Math.random() * 700) + 400,
          timeFall = Math.floor(Math.random() * 1000) + 800,
      
          moveX = particle.x + Math.floor(Math.random() * 401) - 200,
          moveY = particle.y - Math.floor(Math.random() * 200) + 1,
          fallY = particle.y - Math.floor(Math.random() * 400) + 1;

      createjs.Tween.get(particle, {loop: false})
        .to({x: moveX, y: moveY }, timeMove, createjs.Ease.quadOut)
        .to({x: moveX + (moveX/1.2), y: 600 }, timeFall, createjs.Ease.quadIn);
    }
   
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}
 
init();