JSFiddle - React, Tailwind, and code Playground

by Minsup Kim

HTML

<div id="effect">
    <button type="button">Click</button>
    <div id="effect-a" class="effect">1</div>
    <div id="effect-b" class="effect">2</div>
</div>

CSS

.effect {position:absolute;top:50px;padding:30px;text-align:center;color:#fff}
#effect-a {left:20px;background:blue;color:#fff}
#effect-b {left:100px;background:red}

JavaScript

$(function(){
    $("button").click(function(){
        $("#effect-a").stop(true,true).delay(500).css("top", 50).animate({top: "100px"});
        $("#effect-b").stop(true,true).delay(1000).css("top", 50).animate({top: "200px"});
    });
});