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;
    
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
            perspective: 800px;
}
.wrapper, .top, .front{
    position: absolute;
    width: 200px;
    height: 200px;
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.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;
}

.wrapper {    
    -webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
       -moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
            transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}

.top {
    background-color: #00ff00;
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
       -moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
            transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}

.front {
    background-color: #ff0000;
}