JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <figure class="wrapper__figure num__01"></figure>
  <figure class="wrapper__figure num__02"></figure>
  <figure class="wrapper__figure num__03"></figure>
  <figure class="wrapper__figure num__04"></figure>
  <figure class="wrapper__figure num__05"></figure>
  <figure class="wrapper__figure num__06"></figure>
  <figure class="wrapper__figure num__07"></figure>
  <figure class="wrapper__figure num__08"></figure>
  <figure class="wrapper__figure num__09"></figure>
  <figure class="wrapper__figure num__10"></figure>
  <figure class="wrapper__figure num__11"></figure>
  <figure class="wrapper__figure num__12"></figure>
  <figure class="wrapper__figure num__13"></figure>
  <figure class="wrapper__figure num__14"></figure>
  <figure class="wrapper__figure num__15"></figure>
  <figure class="wrapper__figure num__16"></figure>
  <figure class="wrapper__figure num__17"></figure>
  <figure class="wrapper__figure num__18"></figure>
  <figure class="wrapper__figure num__19"></figure>
  <figure class="wrapper__figure num__20"></figure>
  <figure class="wrapper__figure num__21"></figure>
  <figure class="wrapper__figure num__22"></figure>
  <figure class="wrapper__figure num__23"></figure>
  <figure class="wrapper__figure num__24"></figure>
  <figure class="wrapper__figure num__25"></figure>
  <figure class="wrapper__figure num__26"></figure>
  <figure class="wrapper__figure num__27"></figure>
  <figure class="wrapper__figure num__28"></figure>
  <figure class="wrapper__figure num__29"></figure>
  <figure class="wrapper__figure num__30"></figure>
  <figure class="wrapper__figure num__31"></figure>
  <figure class="wrapper__figure num__32"></figure>
  <figure class="wrapper__figure num__33"></figure>
  <figure class="wrapper__figure num__34"></figure>
  <figure class="wrapper__figure num__35"></figure>
  <figure class="wrapper__figure num__36"></figure>
  <figure class="wrapper__figure num__37"></figure>
  <figure class="wrapper__figure...

CSS

/* Reset */
* {
	margin:  0;
	padding:  0;
	font-size:  0;
	border:  0;
	outline:  none;
	box-sizing:  border-box;
}

/* Body Style */
body {
	background-color:  #1b1b1b;
}

/* Main Block */
.wrapper {
	width:  210px;
	height:  210px;
	position:  absolute;
	top:  50%;
	left:  50%;
	margin-top:  -105px;
	margin-left:  -105px;
}

/* Piece Of Main Block */
.wrapper__figure {
	width:  30px;
	height:  30px;
	display:  inline-block;
	background:  #1b1b1b;
	border: 0.5px solid #35322e;
}

/* Animation */
.num__01 {
	animation-name: num__01;
	animation-duration: 3s;
	animation-timing-function: steps(1000, end);
	animation-iteration-count: infinite;
}

@keyframes num__01 {
	0% {
		background-color: yellow;
	}
	12.5% {
		background-color: orange;
	}
	30% {
		background-color: red;
	}
	45.5% {
		background-color: lightblue;
	}
	60% {
		background-color: blue;
	}
	75% {
		background-color: pink;
	}
	100% {
		background-color: purple;
	}
}

.num__02 {
	animation-name: num__02;
	animation-delay: .1s;
	animation-duration: 3s;
	animation-timing-function: steps(1000, end);
	animation-iteration-count: infinite;
}

@keyframes num__02 {
	0% {
		background-color: yellow;
	}
	12.5% {
		background-color: orange;
	}
	30% {
		background-color: red;
	}
	45.5% {
		background-color: lightblue;
	}
	60% {
		background-color: blue;
	}
	75% {
		background-color: pink;
	}
	100% {
		background-color: purple;
	}
}

.num__03 {
	animation-name: num__03;
	animation-delay: .2s;
	animation-duration: 3s;
	animation-timing-function: steps(1000, end);
	animation-iteration-count: infinite;
}

@keyframes num__03 {
	0% {
		background-color: yellow;
	}
	12.5% {
		background-color: orange;
	}
	30% {
		background-color: red;
	}
	45.5% {
		background-color: lightblue;
	}
	60% {
		background-color: blue;
	}
	75% {
		background-color: pink;
	}
	100% {
		background-color: purple;
	}
}

.num__04 {
	animation-name: num__04;
	animation-delay: .3s;
	animation-duration: 3s;
	animation-timing-function: steps(1000,...