JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="content">
    <div id="boxCntnr">
        <div class="box" id="one">1</div>
        <div class="box" id="two">2</div>
        <div class="box" id="three">3</div>
        <div class="box" id="four">4</div>
        <div class="box" id="five">5</div>
        <div class="box" id="six">6</div>
        <div class="box" id="seven">7</div>
        <div class="box" id="eight">8</div>
        <div class="box" id="nine">9</div>
        <div class="box" id="ten">10</div>
    </div>
</div>

CSS

#boxCntnr { position:absolute; width:700px; height:500px; border:0px solid orange;}
.box{	position:absolute;	-webkit-animation:all 0.5s forwards; color:white; font-size:30px; opacity:0.8;background-color:#00a1e1;}
#one{	width: 50px;	height:50px; 	top:290px;	left:150px;	} 
#two{	width: 55px;	height:55px;  	top:210px;	left:270px;	}
#three{	width: 80px;	height:80px;    top:210px;	left:65px;	} 
#four{	width: 55px;	height:55px; 	top:150px;	left:330px;	} 
#five{	width: 80px;	height:80px;  	top:10px;	left:260px;	} 
#six{	width: 110px;	height:110px;	top:90px;	left:395px;	}
#seven{	width: 75px;	height:75px; 	top:10px;	left:510px;	}
#eight{	width: 50px;	height:50px;  	top:90px;	left:590px;	}
#nine{	width: 50px;	height:50px;    top:45px;	left:100px;	}
#ten{	width: 110px;	height:110px; 	top:100px;	left:150px;	}
@-webkit-keyframes one {	0%{}100%{}}
@-webkit-keyframes two {	0%{}100%{}}
@-webkit-keyframes three {	0%{}100%{}}
@-webkit-keyframes four {	0%{}100%{}}
@-webkit-keyframes five {	0%{}100%{}}
@-webkit-keyframes six {	0%{}100%{}}
@-webkit-keyframes seven {	0%{}100%{}}
@-webkit-keyframes eight {	0%{}100%{}}
@-webkit-keyframes nine {	0%{}100%{}}
@-webkit-keyframes ten {	0%{}100%{}}

JavaScript

var seven = document.getElementById("seven");
var ten = document.getElementById("ten");

(function(){
	seven.onclick = function() {	resetRun(this);	}
	ten.onclick = function() {		resetRun(this);	}
})();

var currPos = {
	'one' : {	width:'50px',	height:'50px', 	top:'290px',	left:'150px'},
	'two' : {	width:'55px',	height:'55px',  top:'210px',	left:'270px'},
	'three' : {	width:'80px',	height:'80px',   top:'210px',	left:'65px'},
	'four' : {	width:'55px',	height:'55px', 	top:'150px',	left:'330px'},
	'five' : {	width:'80px',	height:'80px',  top:'10px',		left:'260px'},
	'six' : {	width:'110px',	height:'110px',	top:'90px',		left:'395px'},
	'seven' : {	width:'75px',	height:'75px',	top:'10px',		left:'510px'},
	'eight' : {	width:'50px',	height:'50px',	top:'90px',		left:'590px'},
	'nine' : {	width:'50px',	height:'50px',	top:'45px',		left:'100px'},
	'ten' : {	width:'110px',	height:'110px',	top:'100px',	left:'150px'}
}

var boxPos = {	
	'seven' : {	
		'one' : {	width:'50px',	height:'50px', 	top:'379px',	left:'200px'},
		'two' : {	width:'55px',	height:'55px',  top:'230px',	left:'167px'},
		'three' : {	width:'80px',	height:'80px',  top:'210px',	left:'50px'},
		'four' : {	width:'55px',	height:'55px', 	top:'285px',	left:'240px'},
		'five' : {	width:'80px',	height:'80px',  top:'15px',		left:'212px'},
		'six' : {	width:'110px',	height:'110px',	top:'110px',	left:'274px'},
		'seven' : {	width:'200px',	height:'200px',	top:'10px',		left:'395px'},
		'eight' : {	width:'50px',	height:'50px',	top:'183px',	left:'620px'},
		'nine' : {	width:'50px',	height:'50px',	top:'-20px',	left:'129px'},
		'ten' : {	width:'110px',	height:'110px',	top:'100px',	left:'130px'}
	},
	'ten' : {
		'one' : {width:'50px',	height:'50px', 	top:'350px',	left:'150px'},
		'two' : {width:'55px',	height:'55px',  top:'270px',	left:'325px'},
		'three' : {width:'80px',	height:'80px',   top:'270px',	left:'65px'},
		'four' : {width:'55px',	height:'55px', 	top:'130px',	left:'390px'},
		'five' : {width:'80px',	height:'80px', ...