JSFiddle - React, Tailwind, and code Playground

HTML

<section id="header-cube-container">
    <div id="header-cube">
        <figure></figure>
        <figure></figure>
    </div>
</section>

CSS

#header-cube-container {
    margin:50px;
    position: absolute;
    
    width: 32px;
    height: 32px;
    float: left;
    
    /* Comment this code to reproduct mistak */
    -webkit-perspective: 2500px;
    -moz-perspective: 2500px;    
    -ms-perspective: 2500px;    
    -o-perspective: 2500px;
    perspective: 2500px;

}
#header-cube {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -ms-transform-style: none;
    
    -webkit-transform: rotateX(43deg) rotateZ(130deg);
    -moz-transform: rotateX(43deg) rotateZ(130deg);
    -o-transform: rotateX(43deg) rotateZ(130deg);
    transform: rotateX(43deg) rotateZ(130deg);
    -ms-transform: none;
}
figure {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 0 10px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 0 10px;
    -ms-box-shadow: rgba(255, 255, 255, 0.4) 0 0 10px;
    -o-box-shadow: rgba(255, 255, 255, 0.4) 0 0 10px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 0 10px;
}
figure:nth-child(1) {
    -webkit-transform: translateZ(-16px);
    -moz-transform: translateZ(-16px);
    -o-transform: translateZ(-16px);
    transform: translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg) translateZ(-16px);
    
    background:green;
}
figure:nth-child(2) {
    -webkit-transform: rotateY(-100deg) translateZ(-16px);
    -moz-transform: rotateY(-100deg) translateZ(-16px);
    -o-transform: rotateY(-100deg) translateZ(-16px);
    transform: rotateY(-100deg) translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg) rotateY(-100deg) translateZ(-16px);
    
    background:red;
}