JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<div class="cubo">
  <div class="cara" id="superior"></div>
  <div class="cara" id="frente"></div>
  <div class="cara" id="derecha"></div>
  <div class="cara" id="izquierda"></div>
  <div class="cara" id="atras"></div>
  <div class="cara" id="inferior"></div>
</div>

CSS

.cubo,.cubo .cara {
	width: 200px;
	height: 200px;
}
.cubo .cara {
	position: absolute;
}
.cubo {
	margin: 100px auto;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
	-moz-transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
	-o-transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
	-ms-transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
	transform: perspective(700px) rotateX(-30deg) rotateY(-30deg);
}
.cubo .cara#superior {
	background-color: orange;
	-webkit-transform: rotateX(90deg) translateZ(100px);
	-moz-transform: rotateX(90deg) translateZ(100px);
	-o-transform: rotateX(90deg) translateZ(100px);
	-ms-transform: rotateX(90deg) translateZ(100px);
	transform: rotateX(90deg) translateZ(100px);
}
.cubo .cara#frente {
	background-color: red;
	-webkit-transform: translateZ(100px);
	-moz-transform: translateZ(100px);
	-o-transform: translateZ(100px);
	-ms-transform: translateZ(100px);
	transform: translateZ(100px);
}
.cubo .cara#atras {
	background-color: green;
	-webkit-transform: translateZ(-100px);
	-moz-transform: translateZ(-100px);
	-o-transform: translateZ(-100px);
	-ms-transform: translateZ(-100px);
	transform: translateZ(-100px);
}
.cubo .cara#derecha {
	background-color: blue;
	-webkit-transform: rotateY(90deg) translateZ(100px);
	-moz-transform: rotateY(90deg) translateZ(100px);
	-o-transform: rotateY(90deg) translateZ(100px);
	-ms-transform: rotateY(90deg) translateZ(100px);
	transform: rotateY(90deg) translateZ(100px);
}
.cubo .cara#izquierda {
	background-color: yellow;
	-webkit-transform: rotateY(-90deg) translateZ(100px);
	-moz-transform: rotateY(-90deg) translateZ(100px);
	-o-transform: rotateY(-90deg) translateZ(100px);
	-ms-transform: rotateY(-90deg) translateZ(100px);
	transform: rotateY(-90deg) translateZ(100px);
}
.cubo .cara#inferior...