JSFiddle - React, Tailwind, and code Playground

HTML

<div id="horizontalScroller">
    <div>100 characteres</div>
    <div>110 characteres</div>
    <div>120 characteres</div>
    <div>130 characteres</div>
</div>

CSS

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

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

}

JavaScript

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


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