JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
	<div class='wrapper'>
		<div class='front'>Front</div>
		<div class='back'>Back</div>
		<div class='top'>Top</div>
		<div class='bottom'>Bottom</div>
		<div class='left'>Left</div>
		<div class='right'>Right</div>
	</div>
</div>

CSS

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.container {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -100px;
	width: 200px;
	height: 400px;
	background-color: #eee;
}
.wrapper {
	position: absolute;
	
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
			transform-style: preserve-3d;
}
.top, .front, .back, .bottom, .left, .right {
	position: absolute;
	width: 200px;
	height: 400px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	line-height: 400px;

	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
			backface-visibility: hidden;
	
	-webkit-animation-duration: 5s;
	   -moz-animation-duration: 5s;
			animation-duration: 5s;
	
	-webkit-animation-timing-function: linear;
	   -moz-animation-timing-function: linear;
			animation-timing-function: linear;
	
	-webkit-animation-iteration-count: infinite;
	   -moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
	
}
.top, .bottom {
	height: 300px;
	line-height: 300px;
}
.left, .right {
	width: 300px;
}
.front, .back {
	/**
	 * This sets the transform origin to the center of the cube, the z position results from -depth/2
	 */
	-webkit-transform-origin: 50% 50% -150px;
	   -moz-transform-origin: 50% 50% -150px;
			transform-origin: 50% 50% -150px;
}
.top, .bottom {
	/**
	 * z = -height/2
	 */
	-webkit-transform-origin: 50% 50% -200px;
	   -moz-transform-origin: 50% 50% -200px;
			transform-origin: 50% 50% -200px;
}
.left, .right {
	/**
	 * z = -width/2
	 */
	-webkit-transform-origin: 50% 50% -100px;
	   -moz-transform-origin: 50% 50% -100px;
			transform-origin: 50% 50% -100px;
}
.front {
	background-color: #ff0000;
	
	-webkit-animation-name: rotate-front;
	   -moz-animation-name: rotate-front;
			animation-name: rotate-front;
}
.back {
	background-color: #00cc00;
	
	-webkit-animation-name: rotate-back;
	   -moz-animation-name: rotate-back;
			animation-name:...