JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="boxes">
    <div class="box1">text1</div>
    <div class="box2">text2</div>
    <div class="box3">text3</div>
</div>

CSS

.boxes div {
    display: none;
}

.boxes {
    display: block;
    position: relative;
    width: 300px;
    height: 300px;
    border: 3px solid #000;
    background: #eee;
}

.box1, .box2, .box3 {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #666;
    background: lightgreen;
    text-align: center;
    line-height: 100px;
}

.box2 {
    bottom: 0;
    right 0;
}

.box3 {
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
}

JavaScript

$(document).ready(function () {
    var allBoxes = $("div.boxes").children("div");
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 5000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}