JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="twitter_update_list">
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
<ul>

JavaScript

var first = 0;
var speed = 700;
var pause = 1000;

function removeFirst(){
    first = $('ul#twitter_update_list li:first').html();
    $('ul#twitter_update_list li:first')
    .animate({opacity: 0}, speed)
    .fadeOut('slow', function() { $(this).remove(); addLast(first); });
}

function addLast(first){
    last = '<li style="display:none">'+first+'</li>';
    $('ul#twitter_update_list').append(last)
    $('ul#twitter_update_list li:last')
    .animate({opacity: 1}, speed)
    .fadeIn('slow')
}

interval = setInterval(removeFirst, pause);