JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<div id="rain" class="rain"></div>

CSS

body {
  background: #333;
}

.drop {
  background: #fff;
  width: 1px;
  height: 6px;
  position: absolute;
  bottom: 200px;
  -webkit-animation: fall .65s linear infinite;
  -moz-animation: fall .65s linear infinite;
}


/* animate the drops*/

@-webkit-keyframes fall {
  to {
    margin-top: 900px;
  }
}

@-moz-keyframes fall {
  to {
    margin-top: 900px;
  }
}

JavaScript

var nbDrop = 500;

// function to generate a random number range.
function randRange(minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {
  var rain = $('.rain');
  for (var i = 1; i < nbDrop; i++) {
    var dropLeft = randRange(0, 1600);
    var dropTop = randRange(-1000, 1400);

    rain.append('<div class="drop" id="drop' + i + '"></div>');
    $('#drop' + i).css('left', dropLeft);
    $('#drop' + i).css('top', dropTop);
  }

}
// Make it rain
createRain();