JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<ul class="ticker">
		<li>
			Margus
		</li>
		<li>
			see
		</li>
		<li>
	on
		</li>
		<li>
kena.
		</li>
	</ul>

CSS

.ticker
{
    text-align: right;
    list-style-position: inside;
    text-decoration: none
}
ul { overflow: hidden; margin: 0; padding: 0;
  list-style-type: none; }

li { float: left; margin-bottom: 0;  margin-right: 0.5em;
  background: #eee; line-height: 1; border: 1px solid #ddd; padding:6px;}

a { padding: 0.25em 0.5em; display: block; border: none; }

JavaScript

function ticker(){
        var tickitem = $('.ticker li:first')
        $(tickitem).animate({ width: '0px' }, '500');
        $(tickitem).appendTo($('.ticker'));
        $(tickitem).show("slide", { direction: "left" }, 150);
	}
	setInterval(function(){ ticker() }, 3000);