JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ticker01">
            <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
            <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
            <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
            <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
            <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
            <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
            <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
            <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
            <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
            <!-- eccetera -->
        </ul>

CSS

/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff; 
width: 738px; 
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
    

float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
}

JavaScript

$(function(){
            $("ul#ticker01").liScroll();
        });

jQuery.fn.liScroll = function(settings) {
		settings = jQuery.extend({
		travelocity: 0.08
		}, settings);		
		return this.each(function(){
				var $strip = jQuery(this);
				$strip.addClass("newsticker")
				var stripWidth = 1;
				$strip.find("li").each(function(i){
				stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
				});
				var $mask = $strip.wrap("<div class='mask'></div>");
				var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");								
				var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width 	
				
				$strip.width(stripWidth);			
				var totalTravel = stripWidth+containerWidth;
				var defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye		
				function scrollnews(spazio, tempo){
				$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
				}
				alert(totalTravel);
				scrollnews(totalTravel, defTiming);				
				$strip.hover(function(){
				jQuery(this).stop();
				},
				function(){
				var offset = jQuery(this).offset();
				var residualSpace = offset.left + stripWidth;
				var residualTime = residualSpace/settings.travelocity;
				scrollnews(residualSpace, residualTime);
				});			
		});	
};