JSFiddle - React, Tailwind, and code Playground

by christianmenz

HTML

<div class="canvas">
    <div class="front face"></div>
    <div class="back face"></div>
    <div class="top face"></div>
    <div class="bottom face"></div>
    <div class="left face"></div>
    <div class="right face"></div>
</div>

CSS

.canvas {
    width:250px;
    height:250px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
    margin:50px;
}
.face {
    width:100px;
    height:100px;
}
.front {
    background-color:blue;
}
.back {
    background-color:red;
}
.top {
    background-color:green;
}
.bottom {
    background-color:purple;
}
.left {
    background-color:yellow;
}
.right {
    background-color:salmon;
}