JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ele">1</div>
    <div class="ele">2</div>
    <div class="ele">3</div>

CSS

.rows { float:left; width:390px; }
.ele { 
    display:block; position:relative; float:left; width:100px; height:100; margin:10px; color:#fff;
    text-align:center; background-color:#000;
}

JavaScript

/*
if you click one box and after that
keep frequently clicking other box.
you will see it waits half of animate duration
*/
$('.ele').click(function() {
    
    if ( !$('.ele').is(':animated') ) {//this duration 2000 but need to be 4000
        $('.ele').stop().animate({'top':'0px'},2000);
        $(this).stop().animate({'top':'100px'},4000);
    } 
});