JSFiddle - React, Tailwind, and code Playground

by jeremyblalock

HTML

<div class='wrapper'>
    <div class='section section1'></div>
    <div class='section section2'></div>
    <div class='section section3'></div>
    <div class='section section4'></div>

    <div class='section section2'></div>
    <div class='section section3'></div>
    <div class='section section4'></div>
    <div class='section section5'></div>

    <div class='section section3'></div>
    <div class='section section4'></div>
    <div class='section section5'></div>
    <div class='section section6'></div>

    <div class='section section4'></div>
    <div class='section section5'></div>
    <div class='section section6'></div>
    <div class='section section7'></div>
</div>

CSS

.section {
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    width: 21%;
    height: 100px;
    margin: 2%;
    background: #f00;
    float: left;
}
.active .section {
    opacity: 1;
}
.section2 {
    -webkit-transition-delay: 0.025s;
}
.section3 {
    -webkit-transition-delay: 0.05s;
}
.section4 {
    -webkit-transition-delay: 0.075s;
}.section5 {
    -webkit-transition-delay: 0.1s;
}
.section6 {
    -webkit-transition-delay: 0.125s;
}
.section7 {
    -webkit-transition-delay: 0.15s;
}

JavaScript

$('.wrapper').addClass('active');