JSFiddle - React, Tailwind, and code Playground

HTML

<div id="homeSponsorsContainer">
		<div id="homeSponsorsContent">
			 <div class="scroller">
				<ul>
					<li><img src="<?php echo $siteurl;?>/images/abplogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/ansellogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/balfourlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/beallogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/nhslogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/consortlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/brocklesbylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/bupalogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/greenergylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/hullcitylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/wittlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/outredlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/omglogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/manchesterlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/northumbrialogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/mimaslogo.png"></li>
				</ul>
			 </div>
			 
			 <div class="scrollerTwo">
				 <ul>
					<li><img src="<?php echo $siteurl;?>/images/abplogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/ansellogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/balfourlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/beallogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/nhslogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/consortlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/brocklesbylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/bupalogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/greenergylogo.png"></li>
					<li><img src="<?php echo...

CSS

#homeSponsorsContainer{position:relative;background:#494949;padding: 0px 20px;}
#homeSponsorsContent{position:relative;max-width: 960px;margin: 0px auto;padding: 60px 0px 60px 0px;color:#FFF;font-size:0px;line-height: 20px;text-align: center;width:100%!important;overflow: hidden;}
img{display: inline-block;vertical-align: middle;margin-bottom: 20px;width: auto;height: 45px;}
ul{height: 60px;position: relative;overflow: hidden;}
li{position:relative;float:left;padding: 0px 20px;height: auto!important;width: 45px;}
.scroller{position:absolute;left:0px;top:30px;}
.scrollerTwo{position:absolute;top:30px;}

JavaScript

var scrollerwidth = 0;

$(document).ready(function()
{
    $('.scroller ul li').each(function()
    {
        console.log($(this).width());
	    scrollerwidth += ($(this).width() + 40);
	});
	$(".scrollerTwo").css({left: scrollerwidth});
	
    ulScrolls();
});

function ulScrolls()
{
    var scrollertwoleft = parseInt($(".scrollerTwo").css('left')); 
	if (scrollertwoleft <= -scrollerwidth)
    {
		$(".scrollerTwo").css({left: scrollerwidth});
    }
    else
    {
        var scrolleroneleft = parseInt($(".scroller").css('left'));
        if (scrolleroneleft <= -scrollerwidth)
        {
            $(".scroller").css({left: scrollerwidth});
        }
    }    
    $(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
    
    setTimeout(function() { ulScrolls(); }, 120);
}