JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin: 0 auto;">
    <div class="scroll">
        <div class="scrollContainer">
            <div class="scrollText"></div>
        </div>
    </div>
    <div>
        <div>
            <div id="me"></div>
        </div>
    </div>
    <div>
        <div>
            <div id="try">another scroll</div>
        </div>
    </div>
</body>

JavaScript

$(document).ready(function () {
    $(function () {
        var scroll = [];
        scroll = {
            config: {
                text: 'hello everybody',
                speed: 15000,
                container: $('.scrollText'),
                width: 250,
                parent: $('.scrollContainer'),
                parentContainer: $('.scroll'),
                textWidth: 0,
                totalWidth: 0
            },
            init: function (config) {
                $.extend(this.config, config);
                var self = this,
                    selfC = self.config,
                    selfE = selfC.container;
                console.log(selfE);
                selfE.html(scroll.config.text.trim());
                selfE.css({
                    display: 'inline-block'
                })
                selfC.textWidth = scroll.config.container.width();
                //console.log(scroll.config.textWidth);
                selfE.css({
                    width: selfC.textWidth + 10,
                        'margin-right': scroll.config.width,
                        'margin-left': scroll.config.width
                })
                selfC.totalWidth = selfE.outerWidth(true);
                // alert(scroll.config.totalWidth);
                selfC.parentContainer.css({
                    width: scroll.config.width,
                    overflow: 'hidden',
                    margin: '0 auto'
                })
                scroll.animate(selfE);
            },
            animate: function (elem) {
                var self = this,
                    selfC = self.config,
                    selfE = selfC.container;
                selfE.animate({
                    'margin-left': '-=' + (selfC.totalWidth - selfC.width)
                }, selfC.speed, function () {
                    selfE.css({
                        'margin-left': scroll.config.width
                    })
                    selfE.scrollText(selfC); //.speed -= 1000
 ...