JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="ticker">
    <li>
        <span>Sample note 1</span>
    </li>
    <li>
        <span>Sample note 2</span>
    </li>
    <li>
        <span>Sample note 3</span>
    </li>
</ul>

CSS

ul, li, span {
    display: block
}

#ticker li {
    height: 20px;
}

#ticker {
    height: 20px;
    overflow: hidden;
}

JavaScript

$(document).ready(function(){
    function tick(timeout){
        var first = $('#ticker li:first');
        var next = first.next();
        
        first.children('span').fadeOut(timeout);
        first.slideUp(timeout, function () {      
             first.appendTo($('#ticker'));                
        });
        
        next.slideDown(timeout);
        next.children('span').hide().fadeIn(timeout);
    }
    setInterval(function(){tick(1000)}, 2000);
});