JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
     <div class='foo'>
     </div>
</div>

CSS

#container{
    width: 100% ; 
    height: 1000px ;
}
.foo{
    margin-top: 300px ;
    width: 10px ;
    height: 10px ;
    background-color: #0099ff ;
}

.scrolled{
    width: 100px;
    height: 100px;
}
}

JavaScript

$(function(){
    
    $(window).scroll(function(){
        if($(window).scrollTop() >= 300){ 
            $('.foo').addClass('scrolled',100,'swing');
        }
        if($(window).scrollTop() < 300){ 
            $('.foo').removeClass('scrolled',100,'swing');
        }
    });
})();