JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="l transition citem" id="l">
    <div class="l1 transition citem" id="l1">
        1
    </div>
        
</div>


<div class="a transition citem" id="a">
    <div class="a1 transition citem" id="a1">
        2


    </div>
</div>

<div class="b transition citem" id="b">
    <div class="b1 transition citem" id="b1">
       3


    </div>
</div>

<div class="c transition citem" id="c">
    <div class="c1 transition citem" id="c1">
        4


    </div>
</div>
    
    <div class="r transition citem" id="r">
    <div class="r1 transition citem" id="r1">
      5


    </div>
</div>


</div>

CSS

.main{
 width:1000px;
height:100%;
margin-left:-1000px;
}
div{
 font-size:70px;      
}
.transition {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;   
}

.a,.b,.c,.l,.r {
    width:200px;
    height:100%;
    position:absolute;
    -webkit-perspective: 400px;
    -moz-perspective: 400px;   
}

.b {
position:absolute;
    left:100px;
}
.a {
    left:-100px;
    
}
.a1{
 background-color:#bbbbff;
    opacity:0.4;
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(-40deg) translateZ(-60px) translateX(0px);      
 -moz-transform: rotateX(0deg) rotateY(-40deg) translateZ(-60px) translateX(-30px);      
}

.b1{
     
    width:100%;
    height:100%;
    overflow:scroll;  
}

.c {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;   
    position:absolute;

    left:300px;
}
.c1{
     background-color:#bbbbff;
    opacity:0.4;
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(40deg) translateZ(-60px) translateX(30px);      
 -moz-transform: rotateX(0deg) rotateY(40deg) translateZ(-60px) translateX(30px);
}

.l {
    left:-300px;
    opacity:0;
}
.l1{
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(-40deg) translateZ(-30px) translateX(-15px);      
 -moz-transform:rotateX(0deg) rotateY(-40deg) translateZ(-30px) translateX(-15px);           
}

.r {
    left:700px;
    opacity:0;
}
.r1{
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(40deg) translateZ(-30px) translateX(-15px);      
 -moz-transform:rotateX(0deg) rotateY(40deg) translateZ(-30px) translateX(-15px);      
}
.overlay {
 position:absolute;top:0;left:0;width:100%;height:100%;background-color:#DDD; opacity: 0.5;   
}

JavaScript

var sin20 = 0.34202014332566873304409961468226;
var sin40 = 0.64278760968653932632264340990726;
var sin60 = 0.86602540378443864676372317075294;
$(".a").click(function() {
    $("#c").attr("class","r transition");
    $("#c1").attr("class","r1 transition");
    $("#b").attr("class","c transition");
    $("#b1").attr("class","c1 transition");
    $("#a").attr("class","b transition");
    $("#a1").attr("class","b1 transition");
    $("#l").attr("class","a transition");
    $("#l1").attr("class","a1 transition");
    $("#r").removeClass("transition");
    $("#r").attr("class","l");
    $("#r1").attr("class","l1");
    $("#r").addClass("transition");
    CorrectCarousel();
    setTimeout(function(){
        $(".citem").removeClass("transition");
        c = $(".c1").html();
        b = $(".b1").html();
        a = $(".a1").html();
        l = $(".l1").html();
        r = $(".r1").html();
               
        $("#l1").html(l);
        $("#a1").html(a);
        $("#b1").html(b);
        $("#c1").html(c);
        $("#r1").html(r);
        
        $("#c").attr("class","c");
        $("#c1").attr("class","c1");
        $("#b").attr("class","b");
        $("#b1").attr("class","b1");
        $("#a").attr("class","a");
        $("#a1").attr("class","a1");
        $("#l").attr("class","l");
        $("#l1").attr("class","l1");
        $("#r").attr("class","r");
        $("#r1").attr("class","r1");
        $(".citem").addClass("transition");
        CorrectCarousel();
    },400);
});

$(".c").click(function() {
    $("#c").attr("class","b transition");
    $("#c1").attr("class","b1 transition");
    $("#b").attr("class","a transition");
    $("#b1").attr("class","a1 transition");
    $("#a").attr("class","l transition");
    $("#a1").attr("class","l1 transition");
    $("#r").attr("class","c transition");
    $("#r1").attr("class","c1 transition");
    $("#l").removeClass("transition");
    $("#l").attr("class","r");
    $("#l1").attr("class","r1");
   ...