JSFiddle - React, Tailwind, and code Playground

by leongaban

HTML

<section>
    <div id="blue">blue div</div>
    <div id="orange">orange div</div>
    <div id="green">green div</div>
</section>

CSS

body {
    font-family:arial;
}
div {
    position: absolute;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: white;
}
#blue {
    opacity: 0;
    background: #006497;
}
#orange {
    opacity: 0;
    background: #f58733;
}
#green {
    opacity: 0;
    background: #97b353;
}

JavaScript

$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() {
    $('#blue').fadeOut('fast');
    $('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() {
        $(this).fadeOut('fast');
        $('#green').animate({opacity: '1'}, 3500);
    });
});