JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="stage">
  <div class="noobbuilder-cube noobbuilder-object" data-behaviour="portal">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="front"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

CSS

/* cube */
.noobbuilder-object{
	transform-style:preserve-3d;
	position:absolute;
	transition:all 0s;
	height:100px;
  width:100px;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
}
.noobbuilder-cube>div{
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
}
.noobbuilder-cube>.top{
	position:absolute;
	width:100%;
	height:100%;
	transform:translateY(-50px) translateZ(50px) rotateX(90deg) scaleX(1.01) scaleZ(1.01);
}
.noobbuilder-cube>.top:after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.38+100 */

background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#61000000',GradientType=0 ); /* IE6-9 */


}

.noobbuilder-cube>.bottom{
	position:absolute;
	width:100%;
	height:100%;
	transform:translateY(50px) translateZ(50px) rotateX(-90deg);
}
.noobbuilder-cube>.front{
	position:absolute;
	width:100%;
	height:100%;
	transform:translateZ(100px) scaleX(1.01) scaleY(1.01);
}
.noobbuilder-cube>.left{
	position:absolute;
	width:100%;
	height:100%;
	transform:translateX(-50px) translateZ(50px) rotateY(-90deg);
}
.noobbuilder-cube>.right{
	position:absolute;
	width:100%;
	height:100%;
	transform:translateX(50px) translateZ(50px) rotateY(90deg);
}
.stage{
  perspective:500px;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  perspective-origin: 50% 50%;
}

.noobbuilder-cube{
   animation-name: spin;
  ...