JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site">
    <div id="snowZone"></div>
</div>

CSS

.snowflakes {
    top:0px;
    left:0px;
    position:absolute;
    z-index:200;
    width:10px;
    height:10px;
    background:white;
}
body {background-color:grey;}
#site {
    width:500px;
    height:500px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

JavaScript

// Snow Falling
    function fallingSnow() {
    
        var $snowflakes = $(), qt = 20;
        
        for (var i = 0; i < qt; ++i) {
            var $snowflake = $('<div class="snowflakes"></div>');
            $snowflake.css({
                'left': (Math.random() * $('#site').width()) + 'px',
                'top': (- Math.random() * $('#site').height()) + 'px'
            });
            // add this snowflake to the set of snowflakes
            $snowflakes = $snowflakes.add($snowflake);
        }
        $('#snowZone').prepend($snowflakes);
    
        $snowflakes.animate({
            top: "500px",
            opacity : "0",
        }, Math.random() + 5000, function(){
            $(this).remove();
            // run again when all 20 snowflakes hit the floor
            if (--qt < 1) {
                fallingSnow();
            }
        });
    }
    fallingSnow();