JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="card three"></div>
    <div class="card two"></div>
    <div class="card one"></div>
</div>

CSS

.container{
    width:200px;
    height:200px;
    position:relative;
}
.container div{
    width:100px;
    height:100px;
    position:absolute;
}

.one{
    background-color:red;
    z-index:1;
    left:20px;
    top:20px;
}
.two{
    background-color:blue;
    z-index:2;
    left:10px;
    top:10px;
}
.three{
    background-color:green;
    z-index:3;
    top: 0;
    left: 0;
}

JavaScript

Fx.shift = new Class({
    Extends: Fx,
    initialize: function(element, options){
        this.element = $(element);
        this.setOptions(options);
    },
    set: function(now){
        this.element.setStyle('top', now + 'px');
        this.element.setStyle('left', now + 'px');
    }
});

var stacks = Array.from($$('.container div'));


$$('.container')[0].addEvent('click', function(){
    
    stacks.each(function(card, index){
            var shifter = new Fx.shift(card);
                 switch(index){
                 case 0:           
                         card.tween('opacity', 0);        
                         shifter.start(0, 20).chain(function(){
                             card.tween('opacity',1,1);
                             card.setStyle('z-index', 1);  
                         });
                       
                 break;
                 case 1:
                         shifter.start(10, 0).chain(function(){
                             card.setStyle('z-index', 3);
                         });
                     
                 break;
                 case 2:
                         shifter.start(20,10).chain(function(){
                          
                          card.setStyle('z-index', 2);
                         })
                    
                 break;
                 }
        
    });
    
    var first = stacks.shift();
                stacks.push(first);
    
});