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;
    animation: 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;
}
@keyframes one {
    0% {
    }
    100% {
    }
}
@keyframes two {
    0% {
    }
    100% {
    }
}
@keyframes three {
    0% {
    }
    100% {
    }
}
@keyframes four {
    0% {
    }
    100% {
    }
}
@keyframes five {
    0% {
    }
    100% {
    }
}
@keyframes six {
    0% {
    }
    100% {
    }
}
@keyframes seven {
    0% {
    }
    100% {
    }
}
@keyframes eight {
    0% {
    }
    100% {
    }
}
@keyframes nine {
    0% {
    }
    100% {
    }
}
@keyframes ten {
    0% {
    }
    100% {
    }
}

JavaScript

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

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

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'
  ...