JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div></div>
    <div></div>
</div>

CSS

.container {
    position: relative;
	width:220px;
	height:150px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transform-style: preserve-3d;
     -webkit-perspective: 500px;
     -webkit-perspective-origin: 75px 75px;
}
.container > div {
    position: absolute;
    left: 0;
    width: 200px;
}
.container > :first-child {
    -webkit-transform: rotateY(-45deg);
    /* -webkit-transform: translateZ(10px); */
    background-color: orange;
    top: 10px;
    width:200px;
    height: 135px;
}
.container > :last-child {
     -webkit-transform: translateZ(20px);
    background-color: rgba(0, 0, 255, 0.75);
    top: 50px;
    width:200px;
    height: 100px;
} 

/* .container {
    background-color: rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    perspective: 500px;
}
.container > div {
    position: absolute;
    left: 0;
}
.container > :first-child {
    transform: rotateY(45deg);
    background-color: orange;
    top: 10px;
    height: 135px;
}
.container > :last-child {
    transform: translateZ(40px);
    background-color: rgba(0, 0, 255, 0.75);
    top: 50px;
    height: 100px;
} */