JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="news-ticker-body">
        <div class="news-ticker-display"><!--
            --><ul><!--
                --><li class="news-text">News 1: 11 12 13 14 15</li><!--
                --><li class="news-text">|News 2: 6 7 8 9 10</li><!--
                --><li class="news-text">News 3: Lorem ipsum dolor sit amet, te sed dolor inermis. Eum ad probo postulant mnesarchum, imperdiet comprehensam an mei. Ut meis maiorum sed.</li><!--
                --><li class="news-text">News 4: 16 17 18 19 20</li><!--
                --><li class="news-text">News 5: <a href="http://google.com">GoogleGoogleGoogle</a></li><!--
            --></ul><!--
        --></div>
    </div>

CSS

.news-ticker-body
{
    float: left;
    height: 100%;
    border: 2px solid #26343f;
    position: relative;
}

.news-ticker-body
{
    background: White;
    width: 610px;
    border-left: 0;
    border-right: 0;
}

.news-ticker-display
{
    white-space: nowrap;
    display: inline-block;
}

.news-ticker-display ul
{
    margin: 0;
    padding: 0;
}

.news-ticker-display ul li
{
    display: inline-block;
}

.news-text
{
    border: 1px solid Red;
}

JavaScript

var playScroll = true;
var scrollSpeed = 50;

function autoPlay() {
    if(!playScroll) return;
        
    var width = $('.news-ticker-display li:first').outerWidth();
    var animateTime = width*scrollSpeed;
    
    $('.news-ticker-display').animate({ marginLeft: -width }, animateTime, "linear", function(){
        $('.news-ticker-display li:first').clone().appendTo('.news-ticker-display ul');
        $('.news-ticker-display li:first').remove();
        $('.news-ticker-display').css("marginLeft", 0);
        autoPlay();
    });
}

autoPlay();