JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="frame">
	<div id="b01" class="shape">1</div><div id="b02" class="shape">2</div><div id="b03" class="shape">3</div><div id="b04" class="shape">4</div>
	<div id="b05" class="shape">5</div><div id="b06" class="shape">6</div><div id="b07" class="shape">7</div><div id="b08" class="shape">8</div>
	<div id="b09" class="shape">9</div><div id="b10" class="shape">10</div><div id="b11" class="shape">11</div><div id="b12" class="shape">12</div>
	<div id="b13" class="shape">13</div><div id="b14" class="shape">14</div><div id="b15" class="shape">15</div>
</div>
</body>

CSS

@-webkit-keyframes r1{
	100% {top:0px;}
	}
	@-webkit-keyframes r2{
	100% {top:100px;}
	}
	@-webkit-keyframes r3{
	100% {top:200px;}
	}
	@-webkit-keyframes r4{
	100% {top:300px;}
	}
	@-webkit-keyframes s1{
	100% {left:0px;}
	}
	@-webkit-keyframes s2{
	100% {left:100px;}
	}
	@-webkit-keyframes s3{
	100% {left:200px;}
	}
	@-webkit-keyframes s4{
	100% {left:300px;}
	}
	#frame{
	position:absolute;
	top:90px;
	left:90px;
	width:400px;
	height:400px;
	border: solid 10px #777;
	border-radius:10px;
	background:white;
	}
	.shape{
	height:99px;
	width:99px;
	position:absolute;
	border: solid 1px #777;
	font-family:"Calibri";
	font-size:70px;
	font-weight:bold;
	color:white;
	text-align: center;
	}
	#b01{
	top:100px;
	left:0px;
	background:#cc99ff;
	-webkit-animation: r1 ease-in-out 2s forwards 10s;
	}
	#b02{
	top:0px;
	left:0px;
	background:#cc66ff;
	-webkit-animation: s2 ease-in-out 2s forwards 8s;
	}
	#b03{
	top:0px;
	left:100px;
	background:#cc33ff;
	-webkit-animation: s3 ease-in-out 2s forwards 6s;
	}
	#b04{
	top:100px;
	left:300px;
	background:#cc00ff;
	-webkit-animation: r1 ease-in-out 2s forwards;
	}
	#b05{
	top:100px;
	left:100px;
	background:#ff99ff;
	-webkit-animation: s1 ease-in-out 2s forwards 12s;
	}
	#b06{
	top:200px;
	left:100px;
	background:#ff66ff;
	-webkit-animation: r2 ease-in-out 2s forwards 14s;
	}
	#b07{
	top:00px;
	left:200px;
	background:#ff33ff;
	-webkit-animation: r2 ease-in-out 2s forwards 4s;
	}
	#b08{
	top:100px;
	left:200px;
	background:#ff00ff;
	-webkit-animation: s4 ease-in-out 2s forwards 2s;
	}
	#b09{
	top:300px;
	left:00px;
	background:#ff99cc;
	-webkit-animation: r3 ease-in-out 2s forwards 18s;
	}
	#b10{
	top:200px;
	left:00px;
	background:#ff66cc;
	-webkit-animation: s2 ease-in-out 2s forwards 16s;
	}
	#b11{
	top:200px;
	left:300px;
	background:#ff33cc;
	-webkit-animation: s3 ease-in-out 2s forwards 26s;
	}
	#b12{
	top:300px;
	left:300px;
	background:#ff00cc;
	-webkit-animation: r3 ease-in-out 2s forwards...