JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<p><button class="toggle">Toggle Blocks</button></p>

<div id="block" class="transition">
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
</div>

CSS

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #ddd;
}
p {
    margin-top: 25px;
}
.toggle {
    font-size: 1.5em;
    padding: 15px;
    font-weight: bold;
}
#block {
    margin: 25px auto;
    background: #333;
    -webkit-transition: opacity, display, width 1.5s ease-in-out; 
}
#block.transition {
    opacity: 0;  
    width: 0;
    padding: 0;
    border: 1px solid yellow;
    -webkit-transition: all 1.9s ease-in-out; 
}
#block.transition.show {
    opacity: .3;  
    border-color: blue;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    width: 550px;
    padding: 25px;
    border-width: 15px;
    -webkit-transition: all 3s ease-in-out; 
}
.blocks {
    display: inline-block;
    background-color: red;
}
.blocks.transition {
    opacity: .1; 
    width: 0;
    height: 0;
    margin: 0; 
    -webkit-transition: all 1.7s ease-in-out; 
}
.blocks.transition.show {
    opacity: 1;
    width: 150px;
    height: 150px;
    margin: 10px;
    -webkit-transition: all 4.5s ease-in-out;
}

JavaScript

$(document).ready(function load(){
    var $block = $("#block"),
        $blocks = $block.find(".blocks.transition");

    $('.toggle').click(function c(){
        $block.toggleClass('show');
        
        $blocks.delay(1500).toggleClass('show');
    });
});