JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="click">click</a>
<div class="con">
<ul>
        <li></li>
        <li></li>
        <li></li>
            <li></li>
    
    
    </ul></div>

CSS

ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;}
li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;}
.con{display:block;width:200px;height:300px;overflow:hidden;}

JavaScript

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginTop: "+=250px"},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ marginTop: "-=250px" },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};

animatethis($('.con ul li:first-child'), 10000);