JSFiddle - React, Tailwind, and code Playground

HTML

<!--section.container>div#cube_$*40>.front+.back+.right+.left+.top+.bottom-->
	<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>
		<div id="cube_2">
			<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>
		<div id="cube_3">
			<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>
		<div id="cube_4">
			<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>
		<div id="cube_5">
			<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>
		<div id="cube_6">
			<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>
		<div id="cube_7">
			<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>
		<div id="cube_8">
			<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>
		<div id="cube_9">
			<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>
		<div id="cube_10">
			<div class="front"></div>
			<div class="back"></div>
			<div...

SCSS

/* scss --watch scss/style.scss:css/style.css */
$container_size: 600; /*сыртқы контейнердің көлемі*/
$cube_start_size: 14; /*ең кішкентай кубтың көлемі*/ 
$size_step: 10; /*келесі куб неше пиксельге үлкеюі керек*/
$cube_col: 40; /*кубтар саны*/

$anim_duration: 6; /*анимация ұзақтығы*/
$anim_delay: 2000; /*анимация неше мс кейін басталуы керек*/
$anim_delay_step: 100; /*келесі кубта неше мс кейін анимация басталуы керек*/

$rotateX_start: 35.3; 
$rotateY_start: 45;

$rotateX_end: 35.3; 
$rotateY_end: -135;

body {
	background-color: #323232;
}
.container {
  width: $container_size+px;
  height: $container_size+px;
  position: relative;
  margin: 0 auto;
  margin-top: 100px;
}

[id^=cube] {
  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;
  -webkit-transform: rotateX($rotateX_start+deg) rotateY($rotateY_start+deg);
  -ms-transform: rotateX($rotateX_start+deg) rotateY($rotateY_start+deg);
  -o-transform: rotateX($rotateX_start+deg) rotateY($rotateY_start+deg);
  transform: rotateX($rotateX_start+deg) rotateY($rotateY_start+deg);
  -webkit-animation-name: first_anim;
  -o-animation-name: first_anim;
  animation-name: first_anim;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: $anim_duration+s;
  -o-animation-duration: $anim_duration+s;
  animation-duration: $anim_duration+s;
}
[id^=cube] div {
  margin: 0;
  position: absolute;
  -webkit-box-shadow: inset 0 0 1px #000;
  box-shadow: inset 0 0 1px #fff;
}


@for $i from 1 through $cube_col {
  $hue: $i * 4;
	#cube_#{$i} {
	  width: $cube_start_size+px;
	  height: $cube_start_size+px;
	  top: $container_size/2+px;
	  left: $container_size/2+px;
	  -webkit-animation-delay: $anim_delay+ms;
	  -o-animation-delay: $anim_delay+ms;
	  animation-delay:...