JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
        <div class="uno">
            <h1>Sección Uno</h1>
        </div>
        <div class="dos">
            <h1>Sección Dos</h1>
        </div>
        <div class="tres">
            <h1>Sección Tres</h1>
        </div>
        <div class="cuatro">
            <h1>Sección Cuatro</h1>
        </div>
    </div>

CSS

#slider { background:#000; position:relative }
        #slider{ height:300px; background-color:black; }
        #slider div{ position:absolute; width:100%; height:100%;  overflow:hidden;  display:none;}
         .uno { background:red;}
        .dos { background:blue }
        .tres { background:green }
        #slider .cuatro{ background:yellow;  display:block }

JavaScript

$(function(){
    rotacion()    
})


function rotacion(){
    setInterval(
        function(){
            $("#slider div").hide()
            $("#slider div:first")
                .show()
                .css("opacity",0)
                .animate({opacity:1},400)
                .appendTo("#slider")
    },2000)
}