JSFiddle - React, Tailwind, and code Playground

by mosleh

HTML

<section class="rain"></section>
<div id="clouds">
    <div class="cloud x1"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
    <div class="cloud x4"><div>
    <div class="cloud x5"></div>
</div>

CSS

*{ margin: 0, padding: 0;}

body {
   overflow: hidden;  
   background: #c9dbe9;
   background: -linear-gradient(top,#c9dbe9 0%, #fff 100%);
   background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
   background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);  
}

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1) ), 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:89px;
  position: absolute;
  bottom:200px;
  -webkit-animation: fall 1s linear infinite;
  -moz-animation: fall 1s linear infinite;
  
}

#clouds {
    padding: 100px 0;
}

.cloud {
    width: 200px;
    height: 60px;
    background: #fff;
    
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    
    position: relative;
}

.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    top: -15px;
    left: 10px;
    background: #fff;
    width: 100px;
    height: 80px;
    
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.cloud:after {
    width: 120px; 
    height: 120px;
    top: -55px;
    left: auto;
    right: 15px;
}

.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    opacity: 0.6;
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
}

.x3 {
    left: -250px;
    top: -200px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    opacity: 0.8;
    
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
}

.x4 {
    left: 470px;
    top: -250px;
    -webkit-transform:...

JavaScript

// number of drops created.
var nbDrop = 1000; 

// 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() {

	for( 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();