JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<section id="container">
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
    <div class="style"></div>
</section>

CSS

body, html {
    margin:0;
}
section#container {
    position:absolute;
    width:100%;
    height: 100%;
    background:orange;
    top:0;
    left:0;
}
.style {
    float:left;
    display:inline;
    margin:10px;
    width:200px;
    height:200px;
    background:lightblue;
}

JavaScript

$(document).ready(function () {
    $(".style").each(function (i) {
        $(this).delay((i + 1) * 200).animate({
            opacity: 0,
        }, 500);
    });
});