JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrap'>
<!-- cube 6-facet-->
	<div id="cube" style='left: 20%; float: left;'>
		<div class="side" id="side1">1</div>
		<div class="side" id="side2">2</div>
		<div class="side" id="side3">3</div>
		<div class="side" id="side4">4</div>
		<div class="side" id="side5">5</div>
		<div class="side" id="side6">6</div>
	</div>
</div>

CSS

body {
 	background: url(http://subtlepatterns.com/patterns/notebook.png) repeat;
	font: 1em 'PT Sant', Tahoma, Arial;    
}
.wrap {
	-moz-pespective: 900px;
	-webkit-pespective: 900px;
    margin: 180px auto;
}
/*Анимация куба*/
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotateX(20deg) rotateY(40deg);
		-moz-transform: rotateX(20deg) rotateY(40deg);
	}
	20% {
		-webkit-transform: rotateX(20deg) rotateY(240deg);
		-moz-transform: rotateX(20deg) rotateY(240deg);
	}
	40% {
		-webkit-transform: rotateX(20deg) rotateY(-240deg);
		-moz-transform: rotateX(20deg) rotateY(-240deg);
	}
	60% {
		-webkit-transform: rotateX(240deg) rotateY(-240deg);
		-moz-transform: rotateX(240deg) rotateY(-240deg);
	}
	80% {
		-webkit-transform: rotateX(-240deg) rotateY(-340deg);
		-moz-transform: rotateX(-240deg) rotateY(-340deg);
	}
	100% {
		-webkit-transform: rotateX(20deg) rotateY(40deg);
		-moz-transform: rotateX(20deg) rotateY(40deg);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotateX(20deg) rotateY(40deg);
		-moz-transform: rotateX(20deg) rotateY(40deg);
	}
	20% {
		-webkit-transform: rotateX(20deg) rotateY(240deg);
		-moz-transform: rotateX(20deg) rotateY(240deg);
	}
	40% {
		-webkit-transform: rotateX(20deg) rotateY(-240deg);
		-moz-transform: rotateX(20deg) rotateY(-240deg);
	}
	60% {
		-webkit-transform: rotateX(240deg) rotateY(-240deg);
		-moz-transform: rotateX(240deg) rotateY(-240deg);
	}
	80% {
		-webkit-transform: rotateX(-240deg) rotateY(-340deg);
		-moz-transform: rotateX(-240deg) rotateY(-340deg);
	}
	100% {
		-webkit-transform: rotateX(20deg) rotateY(40deg);
		-moz-transform: rotateX(20deg) rotateY(40deg);
	}
}
/*cube*/
#cube {
	width: 300px;
	height: 300px;
	position: relative;
	-moz-transform-origin: 50% 50% -150px; /*определение центра куба*/
	-webkit-transform-origin: 50% 50% -150px;
	-moz-transform-style: preserve-3d; /*отображение в 3-d пространстве*/
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotate 30s infinite; /*Запуск...