JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

CSS

ul {
    width: 200px;
    height: 17px;
    padding: 3px 5px;
    border: 2px solid #ccc;
    background: #ddd;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    
    overflow: hidden;
    
    -moz-box-shadow: 0 0 4px #cacaca, inset 0 10px 8px #eee;
    -webkit-box-shadow: 0 0 4px #cacaca;
    box-shadow: 0 0 4px #cacaca, inset 0 10px 8px #eee;
}

ul li {
    height: 23px;
}


ul li a {
    display: block;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    text-decoration: none;
}

JavaScript

function slider(container, delay){
    if ($(container).length){
        container = $(container)
        var slides = container.length,
            slide = 0
        
            setInterval(function(){
                if (slide == slides) {
                   container.slideDown()
                   slide = 0
            }else{
                container.eq(slide).slideUp()
                slide++
            }

            }, delay)
                
    }else{
            return false;
    }
}

slider('ul > li', 2000)