JSFiddle - React, Tailwind, and code Playground

HTML

<div class='stage'>
    <div class='wrapper'>
        <div class='top'></div>
        <div class='front'></div>
    </div>
    
    <div class='wrapper'>
        <div class='top'></div>
        <div class='front'></div>
    </div>
    
    <div class='wrapper'>
        <div class='top'></div>
        <div class='front'></div>
    </div>
    
    <div class='wrapper'>
        <div class='top'></div>
        <div class='front'></div>
    </div>
</div>

CSS

.stage {
    width: 800px;
    height: 800px;
    background: #f6f6f6;
}
.wrapper, .top, .front{
    position: absolute;
    width: 200px;
    height: 200px;
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.wrapper:nth-child(1) {
    z-index: 4;
}
.wrapper:nth-child(2) {
    left: 200px;
    z-index: 3;
}
.wrapper:nth-child(3) {
    left: 400px;
    z-index: 2;
}
.wrapper:nth-child(4) {
    left: 600px;
    z-index: 1;
}

.top {
    background-color: #00ff00;
    
    -webkit-transform-origin: 50% 50% -100px;
       -moz-transform-origin: 50% 50% -100px;
            transform-origin: 50% 50% -100px;
    
    -webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
       -moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
            transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
}

.front {
    background-color: #ff0000;
    
    -webkit-transform-origin: 50% 50% -100px;
       -moz-transform-origin: 50% 50% -100px;
            transform-origin: 50% 50% -100px;
    
    -webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
       -moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
            transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
}