JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="navigationItem" id="nav0">play</a>
<a href="#" class="navigationItem" id="nav1">register</a>
<a href="#" class="navigationItem" id="nav2">our blog</a>
<a href="#" class="navigationItem" id="nav4">contact us</a>
<a href="#" class="navigationItem" id="nav5">about us</a>
<a href="#" class="navigationItem" id="nav6">our rules</a>
<div id="log"/>

CSS

#log
{
    float:right;
    width: 100px;
    font-size: 8pt;
}
.navigationItem {
    background: #808080;
    padding: 1.0em;
    text-decoration: none;
    color: #fff;
    position: absolute;
    font-weight: bold;
    text-shadow: 1px 1px 2px #707070;
    font-size: 1.0em;
    box-shadow: 0px 2px 5px #909090;
    border-radius: 1em;
    -moz-box-shadow: 0px 2px 5px #909090;
    -moz-border-radius: 1em;
    -webkit-box-shadow: 0px 2px 5px #909090;
    -webkit-border-radius: 1em;
}

JavaScript

$(function(){
    var positions = [];
    $(".navigationItem").each(function(){
        var ctx = $(this);
        var dim = {
            width: ctx.outerWidth(),
            height: ctx.outerHeight()
        };
        var success = false;
        while (!success)
        {
            $("#log").append(".");
            dim.left = parseInt(Math.random() * 300);
            dim.top = parseInt(Math.random() * 300);
            var success = true;
            $.each(positions, function(){
                if (
                    dim.left < this.left + this.width &&
                    dim.left + dim.width > this.left &&
                    dim.top < this.top + this.height &&
                    dim.top + dim.height > this.top
                )
                {
                    success = false;
                }
            });
        }
        $("#log").append("<div>"+ctx.text()+":"+dim.left+","+dim.top+"</div>");
        positions.push(dim);
        ctx.animate({
            left: dim.left,
            top: dim.top
        }, "slow");
    });
});