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

function placeBoxesRandomly($boxes, h, w) {
    $boxes.each(function() {
        var $box = $(this);
        var position = $box.position();

        tLeft = w - Math.floor(Math.random() * 900), tTop = h - Math.floor(Math.random() * 900);
        $box.css({
            "left": tLeft,
            "top": tTop
        });
        $box.data("start-position-left", position.left);
        $box.data("start-position-top", position.top);
    });
}

function placeBoxesToDataStorePositions($boxes) {
    $boxes.each(function() {
        var $box = $(this);
        $box.animate({
            "left": $box.data("start-position-left"),
            "top": $box.data("start-position-top")
        }, 3000);
    });
}


$(document).ready(function() {
    var h = $(window).height();
    var w = $(window).width();
    var $allBoxes = $('#intro .box');

    placeBoxesRandomly($allBoxes, h, w);
    
    placeBoxesToDataStorePositions($allBoxes);
});