JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="block" class="transition"></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: red;
}
#block.transition {
    opacity: 0;  
    -webkit-transition: all 2s ease-in-out; 
}
#block.transition.show {
    opacity: .3;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: .4;
    -webkit-transition: all 1s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    padding: 100px;
    background: blue;
    -webkit-transition: all 3s ease-in-out; 
}

JavaScript

$(document).ready(function load(){
    var $block = $("#block");

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