JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

</head>
<body>
<div id='demo'>sdf</div>
<style> 
#demo
{
background-color:blue;
width:2px;
height:6px;
position:relative;
animation:rain .1s;
-moz-animation:rain .10s; /* Firefox */
-webkit-animation:rain .10s; /* Safari and Chrome */
-o-animation:rain .10s; /* Opera */
}

@keyframes rain
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-moz-keyframes rain /* Firefox */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-webkit-keyframes rain /* Safari and Chrome */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}

@-o-keyframes rain /* Opera */
{
0%   {top:0px;}
10%   {top:50px;}
20%   {top:100px;}
30%   {top:150px;}
40%   {top:200px;}
50%   {top:250px;}
60%   {top:300px;}
70%   {top:350px;}
80%   {top:400px;}
90%   {top:4500px;}
100%   {top:500px;}
}
</style>
</body>
</html>