JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="wrapper">
    <div id="scroller">
        <ul>
        </ul>
    </div>
</div>

CSS

@-webkit-keyframes anim
{
  0% {left:0px}
  100% {left:-100%;}
}
body{margin:0px;padding:0px;}
li{list-style-type:none;padding:20px 10px; border-left:1px solid;width:30px;float:left;border-color: rgb(0, 0, 0);
border-top: 1px solid;
border-bottom: 1px solid;
text-align: center;-webkit-transition-duration:500ms;-webkit-animation-duration: 500ms;}
#scroller{white-space:pre;}
#scroller ul{padding:0px;}
#scroller{-webkit-animation-name:anim;position:absolute;top:0px;left:0px;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:10000ms}

JavaScript

$(document).ready(function(){
    var HTML = "";
    for(var i=0;i<10;i++){
        HTML += '<li>'+i+'</li>';
    }
    $("#wrapper ul").html(HTML);
    reset();
});
function reset(){
    var $li = $("#wrapper li:first").detach();
    $("#wrapper ul").append($li);
    setTimeout(reset,2000);
}