JSFiddle - React, Tailwind, and code Playground

HTML

<div id="horizontalScroller">
    <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

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

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

}

JavaScript

window.horizontalScroller = function($elem) {
        var left = parseInt($elem.css("left"));
 
        $elem.animate({ left: (parseInt(left)-60) }, 900, function () {
          var currentLeft = parseInt($(this).css("left"));
          var width       = $(this).width();
          var container   = $(this).parent("#horizontalScroller");
          var containerWidth = $(container).width();

          if ((currentLeft + width) <= 0)
          {
						$(this).css("left", (containerWidth + width) + "px");
					}
	
          window.horizontalScroller($(this))
        });
    }


    $(document).ready(function() {
        var container  = $("#horizontalScroller");
        var children   = $(container).children();
        var containerW = $(container).width();

        for (var i = 0; i < children.length; i++)
        {
        	var item  = children[i];
          var itemW = $(item).width();
          var padding = 10 * (i + 1);

          $(item).css("left", (padding + containerW + itemW * (i + 1)) + "px");
          window.horizontalScroller($(item));
        }
    });