JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
	<div id="cube_1"> 
		<div class="front"></div>
		<div class="back"></div>
		<div class="right"></div>
		<div class="left"></div>
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</section>

CSS

body {
	background-color: #323232; /* фон түсі */
}
.container { /* сыртқы контейнердің разметкасы */
  width: 600px;
  height: 600px;
  position: relative;
  margin: 0 auto;
  margin-top: 80px;
}
#cube_1 {
  position: absolute;
  -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d; /* бұл элемент 3D кейістік ретінде қарастырыдады*/
  -webkit-transform: rotateX(35.3deg) rotateY(45deg);
   -moz-transform: rotateX(35.3deg) rotateY(45deg);
   -ms-transform: rotateX(35.3deg) rotateY(45deg);
   -o-transform: rotateX(35.3deg) rotateY(45deg);
   transform: rotateX(35.3deg) rotateY(45deg); /* блокты X осьінен 10, Y осьінен 20 градусқа бұрамыз */
  width: 20px;
  height: 20px;
  top: 300px;
  left: 300px;
}
#cube_1 div {
  margin: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 1px #fff;
}
/*төмендегі разметкада кубтың алты жағын позициялап, куб түріне әкелеміз*/
#cube_1 .front {
-webkit-transform: rotateY(0deg) translateZ(10px);
-moz-transform: rotateY(0deg) translateZ(10px);
-ms-transform: rotateY(0deg) translateZ(10px);
-o-transform: rotateY(0deg) translateZ(10px);
transform: rotateY(0deg) translateZ(10px);
}
#cube_1 .back {
-webkit-transform: rotateX(180deg) translateZ(10px);
-moz-transform: rotateX(180deg) translateZ(10px);
-ms-transform: rotateX(180deg) translateZ(10px);
-o-transform: rotateX(180deg) translateZ(10px);
transform: rotateX(180deg) translateZ(10px);
}
#cube_1 .right {
-webkit-transform: rotateY(90deg) translateZ(10px);
-moz-transform: rotateY(90deg) translateZ(10px);
-ms-transform: rotateY(90deg) translateZ(10px);
-o-transform: rotateY(90deg) translateZ(10px);
transform: rotateY(90deg) translateZ(10px);
}
#cube_1 .left {
-webkit-transform: rotateY(-90deg) translateZ(10px);
-moz-transform: rotateY(-90deg) translateZ(10px);
-ms-transform: rotateY(-90deg) translateZ(10px);
-o-transform:...