JSFiddle - React, Tailwind, and code Playground

HTML

<div id="intro">
<div id="content">
    <div class="box info">
        <a href="page1.php" class="pagelink"><span class="hide">Page1</span></a>
    </div>
    <div class="box home">
        <a href="page2.php" class="pagelink"><span class="hide">Page2</span></a>
    </div>
    <div class="box aboutus">
        <a href="page3.php" class="pagelink"><span class="hide">Page3</span></a>
    </div>
    <div class="box gallery">
        <a href="page4.php" class="pagelink"><span class="hide">Page4</span></a>
    </div>
    <div class="box reference">
        <a href="page5.php" class="pagelink"><span class="hide">Page5</span></a>
    </div>
    <div class="box colours">
        <a href="page6.php" class="pagelink"><span class="hide">Page6</span></a>
    </div>
</div><!--#content-->
</div><!--#intro-->

CSS

#intro {
    
}
#intro #content {
    width: auto;
    margin-top: 0;
    position: relative;
    height: 80px;
    width: 120px;
    margin: 200px;
    background: #f1f1f1;
    border: 1px solid #f1f1f1
}
.box {
    width: 40px;
    float: left;
    background-position: 0 0;
    overflow: hidden;
    position: relative;
    background: #adbdd0
}
#intro .box {
    height: 40px;
    position: absolute;
    border: 1px solid #fff
}
#intro .box a {
    color: #f1f1f1;
    font: normal 10px Arial;
    display: block;
    text-decoration: none;
    line-height: 40px;
    text-align: center
}
#intro .box.info {
    top: 0;
    left: 0    
}
#intro .box.home {
    top: 0;
    left: 40px    
}
#intro .box.aboutus {
    top: 0;
    left: 80px    
}
#intro .box.gallery {
    top: 40px;
    left: 0    
}
#intro .box.reference {
    top: 40px;
    left: 40px    
}
#intro .box.colours {
    top: 40px;
    left: 80px    
}

JavaScript

$(document).ready(function(){
    var h = $(window).height();
    var w = $(window).width();
    
    $('#intro .box').each(function(){
        //Im trying to randomize boxes, but its not what I want. Boxes should be all around and with mine method they are just positioned on top left. Need help here.
        tLeft = w-Math.floor(Math.random()*900),
        tTop  = h-Math.floor(Math.random()*900);
        $(this).css({"left": tLeft , "top": tTop});
    });
})
    
$(window).load(function(){
    //Huh! What to write here to animate boxes to their initial positions set by CSS?
});