JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<ul class="fader">
    <li><div class="red">Some test</div></li>
    <li><div class="blue">More stuff</div></li>
    <li><div class="green">Another thing</div></li>
    <li><div class="red">Return of the test</div></li>
    <li><div class="blue">Lorem ipsum</div></li>
    <li><div class="green">Dolor sit amet</div></li>
</ul>

SCSS

html,body{
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 100%;
}

ul.fader{
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    li{
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    &.ready{
        li{
            opacity: 0;
            transition: opacity 800ms;
            &.active{
                opacity: 1;
            }
        }
    }
}

div.red,div.blue,div.green{
    padding: 20px;
    color: #fff;
    font-family: sans-serif;
    position: relative;    
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
div.red{ background-color: #d33; }
div.blue{ background-color: #33d; }
div.green{ background-color: #3d3; }

JavaScript

$('ul.fader').each(function(){
    var fader = $(this);
    var initHtml = $('li:first').html();
    $('li:first',fader).remove();
    fader.append($('<li></li>').html(initHtml));
    $('li',fader).each(function(i,v){
        if(i>0){
            $(this).addClass('active');
        }
    });
    fader.addClass('ready');
    setInterval(function(){
        var initHtml = $('li:first').html();
        $('li:first',fader).remove();
        fader.append($('<li></li>').html(initHtml));
        setTimeout(function(){
            $('li:last',fader).addClass('active');
        },100);
    },5000);
});