JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id="data">
    <ul id="feed">
        <li><a href="link.com">first one with a link</a></li>
        <li>second one</li>
        <li><a href="link.com">first one with a link</a></li>
        <li>second one</li>
        <li><a href="link.com">first one with a link</a></li>
        <li>second one</li>
        <li><a href="link.com">first one with a link</a></li>
        <li>second one</li>
        <li><a href="link.com">first one with a link</a></li>
        <li>second one</li>
    </ul>
</div>

CSS

#data {
    width: 100%;
    background-color: #000;
}

/**** Ticker ****/
.tickercontainer { /* the outer div with the black border */
width: 100%; 
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;
width: 100%;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
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;
margin: 0 25px 0 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;

} 
ul.newsticker span {
margin: 0 10px 0 0;
}

ul#feed {
  background-color: #656F78;
  display: block;
  float: left;
  line-height: 30px;
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  height: 30px;
  word-spacing: 0;
}
ul#feed li {
  color: #FFFFFF;
  font-size: 13px;
  line-height: 20px;
  list-style: none outside none;
  margin-left: 20px;
  margin-right: -15px;
  padding-top: 4px;
}

ul#feed li a {
  text-decoration: none;
  color: #ffd101; 
}

ul#feed li a:first-child {
  color: #ffd101 !important;  
}

JavaScript

/* Horizontal Ticker */
jQuery.fn.racScroll = function(settings) {
        settings = jQuery.extend({
        travelocity: 0.07
        }, 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);});
                }
                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);
                });         
        }); 
};

    jQuery(function ($) {
    $("ul#feed").racScroll({travelocity: 0.05});
    });