JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewport">
        <div id="cube">
          <div id="front"></div>
        </div>
      </div>

CSS

html, body, #root {
  width: 100%;
  height: 100%;
}

#viewport {
	width: 100%;
	height: 100%;
  -webkit-perspective: 500px;
	perspective: 500px;
	background-color: #eee;
}

#cube {
	width: 400px;
	height: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;
	background: #777;
	opacity: 0.6;
		overflow: visible !important;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#cube > div {
	background: blue;
	border: 1px solid red;
	width: 100%;
	height: 100%;
		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	opacity: 0.7;
}

#front {
  	-webkit-transform: translateZ(200px);
	-moz-transform: translateZ(200px);
	-ms-transform: translateZ(200px);
	transform: translateZ(200px);
}