JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div style="left:20%;"></div>
<div style="left:35%;"></div>
<div style="left:50%;"></div>

CSS

div {
    width:50px;
    height:50px; 
    top:0px;
    position:absolute;
    opacity:0;
    margin-right:55px;
    background:url("http://a1.twimg.com/profile_images/289439692/0511-0812-1620-2229_Black_and_White_Snowflake_clipart_image_normal.jpg") no-repeat; 
    
}

JavaScript

$("div").each(function(i, el) {
    $(el).bind('snowfall', function() { // bind a custom event
        $(this).animate({top: 150, opacity: 1}, 3000, function() {
            $(this).css({top: 0, opacity: 0}).delay((i + 1) * 1000).trigger('snowfall')}) // recurse        
    }).delay((i + 1) * 1000)}); // initial fire