JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ticker"></div>

CSS

.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 100%;
    background-color: lightgray;
    color: black;
    display: inline-block;
}
.ticker .ticker-text {
    top: 0;
    height: 100%;
    padding: 2px;
}

JavaScript

$.fn.ticker = function (options) {
        'use strict';

        var settings = $.extend({}, $.fn.ticker.defaults, options);
        var $ticker = $(this);
        var tickerdata = {
            'content': 'I have some news for you, here is some breaking news that is looping around and around on and on and never seems to end. But what if it ends?'
        };

        var docfragment = document.createDocumentFragment();
        var $tickerText = $('<span/>', {
            class: 'ticker-text',
            html: tickerdata.content
        }).appendTo(docfragment);
        $ticker.append(docfragment);

        var containerwidth = $ticker.width();
        var left = containerwidth;
        var width = $tickerText.width();

        function tick() {
            return $tickerText.css("marginLeft", left * 2)
                .animate({
                marginLeft: "-" + (left * 2) + "px"
            }, 15000, "linear", tick)
        }
        tick();
        return this;
    }

    $.fn.ticker.defaults = {
        speed: 1
    };
    $('.ticker').ticker();