JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="rain"></div>

CSS

body {
    background: url('http://annimon.com/theme/webdefault/images/logo.png?1449429060');
    background-repeat: no-repeat;
    background-color: #4A4A4A;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 100px;
}

.drop {
    background: -webkit-gradient(linear,0% 0%,0% 100%, from(#ebeef0 ), to(rgba(255,255,255,0.6)) );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width: 1px;
    height: 50px;/*Длина капли*/
    position: absolute;
    bottom: 200px;
    -webkit-animation: fall .83s linear infinite;
    -moz-animation: fall .83s linear infinite;
  
}

/* анимация капли*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}

JavaScript

// количество капель
var nbDrop = 1000; 
// генерации чисел.
var randRange = function ( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
};
// генерация капель
var Rain = function () {
	for(i=1; i < nbDrop; i++) {
	var dropLeft = randRange(0, 666),//666 width
  	dropTop = randRange(-1000, 666);// 666 width
	$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
	$('#drop'+i).css('left',dropLeft).css('top',dropTop);
	}
};
// старт
Rain();