JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <div class='wrapper'>
        <div class='up'></div>
        <div class='front'></div>
    </div>
</div>

CSS

.container, .wrapper, .up, .front{
    width: 200px;
    height: 200px;
}

.container {
    -webkit-perspective: 200px;
       -moz-perspective: 200px;
            perspective: 200px;
}

.wrapper {    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
    -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);
}

.up, .front {
    position: absolute;
}

.up{
    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;
}