JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

CSS

#container {
    width: 500px;
    height: 500px;
}

div.box {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #ccc;
    border-radius: 50%;
    position: relative;
}

JavaScript

$('div.box').each(function() {

    var width = 500;
    var height = 500;
    var $div = $(this);

    $div.css({
        top: Math.floor((Math.random() * height) + 1),
        left: Math.floor((Math.random() * width) + 1)
    });

});