JSFiddle - React, Tailwind, and code Playground

HTML

<div id="marquee-container"><span><img src="http://lorempixel.com/200/100?1"/></span>

<span><img src="http://lorempixel.com/200/100?2"/></span>
 <span><img src="http://lorempixel.com/200/100?3"/></span>
 <span>&nbsp;<img src="http://lorempixel.com/200/100?4"/></span
 <span>&nbsp;<img s&nbsp;rc="http://lorempixel.com/200/100?5"/></span>

</div>

CSS

#marquee-container {
    width:  600px;
   
    border: 10px solid black;
    /* or whatever you want */
    margin: 5 auto;
    /* centers it */
    overflow:hidden;
    white-space: nowrap;

  
}

JavaScript

var hover = false;
    (function (window, document, undefined) {
        var spaceinterval = 1;
        var timeinterval = 20; // `speed`
        var max;
        var firstrun = true;

        // Interval function:
        var gallery = function () {
            var elem = document.getElementById("marquee-container");
            if (!hover) {
                if (elem) {
                    if (firstrun) {
                        max = elem.scrollWidth;
                        // Clone the children of the container until the
                        // scrollWidth is at least twice as large as max.
                        while (elem.scrollWidth < max * 10) {
                            var length = elem.children.length;
                            for (var i = 0; i < length; ++i) {
                                elem.appendChild(elem.children[i].cloneNode(true));
                            }
                            break;
                        }
                        firstrun = false;
                    }
                    if (elem.scrollLeft >= max) {
                        elem.scrollLeft -= max;
                    } else {
                        elem.scrollLeft += spaceinterval;
                    }
                }
            }
        };
        window.setInterval(gallery, timeinterval);
    })(window, document);

    $('#marquee-container').mouseenter(function () {
        hover = true;
    });
    $('#marquee-container').mouseleave(function () {
        hover = false;
    });