JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<div id="cont">
        <div id="face1"></div>
        <div id="face2"></div>
</div>

CSS

#cont {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    transform-style: preserve-3d;
}
#cont > div {
    position: absolute;
    width: 200px;
    height: 200px;
    box-shadow: inset 0 0 0 2px #000;
}
#face1 {
    transform: rotateY(30deg);
    background-color: rgba(200, 0, 0, 0.8);
}
#face2 {
    transform: rotateY(-60deg);
    background-color: rgba(0, 200, 0, 0.8);
}