JSFiddle - React, Tailwind, and code Playground

HTML

<div id="verticalScroller">
    <div>it is a message a little more of 100 characteres</div>
    <div>it is a message a little more of 110 characteres</div>
    <div>it is a message a little more of 120 characteres</div>
    <div>it is a message a little more of 130 characteres</div>
</div>

CSS

#verticalScroller {
    position: absolute;
    width:300px;
    height: 180px;
    border: 1px solid red;
    overflow: hidden;
}

#verticalScroller > div{
    position:absolute;
    width:50px;
    height:50px;
    border: 1px solid blue;
    overflow:hidden;
    display:inline-block;
    background:red;

}

JavaScript

window.verticalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $('#verticalScroller > div').height();
    if(left < temp) {
        left = $('#verticalScroller').height()
        $elem.css("left", left);
    }
    $elem.animate({ left: (parseInt(left)-60) }, 900, function () {
      window.verticalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#verticalScroller > div").each(function () {
          $(this).css("left", i);
          i += 60;
          window.verticalScroller($(this));
    });
});