JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textSlider">
<ul>
    <li class="active">Doors | Windows | Showers</li>
    <li>Superb Fenestration | Superior Service</li>
</ul>
</div>
<div class="clear"></div>

CSS

#textSlider{
    position: relative;
    left: 0;
}
ul{
    list-style: none;
}
ul li{
    position: relative;
    left: -300px;
    display:inline-block;
}
.clear{
    clear: both;
}

JavaScript

setInterval(function(){
        $('.active').animate({'left': '0px'},500)
        .delay(500).animate({'left': '0px'},500)
        .animate({'left':'-300px'},500)
        .removeClass('active')
        .siblings('li').addClass('active');
    }, 2000);