JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube"></div>

CSS

.cube {
    background-color: hsl(0, 0%, 47%);
    width: 256px;
    height: 256px;
    position:relative;
    top:10px;
    left:10px;
}
.cube::after {
    content: '';   
    width: 256px;
    height:50px;
    position:absolute;
    bottom:-50px;
    left:0;
    background-color: hsl(0, 0%, 17%);
    -webkit-transform:skew(35deg);
    -webkit-transform-origin:top;
    
    -moz-transform:skew(35deg);
    -moz-transform-origin:top;
    
    -ms-transform:skew(35deg);
    -ms-transform-origin:top;
    
    -o-transform:skew(35deg);
    -o-transform-origin:top;
    
    transform:skew(35deg);
    transform-origin:top;    
}
.cube::before {
    content: '';
    width: 35px;
    height: 257px;
    position: absolute;
    top: 25px;
    right: -35px;
    background-color:  hsl(0, 0%, 27%);
    -webkit-transform: skewY(55deg);
    -webkit-transform-origin: top;
    
    -moz-transform: skewY(55deg);
    -moz-transform-origin: top;
    
    -ms-transform: skewY(55deg);
    -ms-transform-origin: top;    
    
    -o-transform: skewY(55deg);
    -o-transform-origin: top;     
    
    transform: skewY(55deg);
    transform-origin: top;     
}