JSFiddle - React, Tailwind, and code Playground

CSS

.bola{
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

JavaScript

function addBola() {
        var bola = document.createElement("div");
        bola.setAttribute("class", "bola");
                
            var bolas = Array.prototype.map.call(document.getElementsByClassName('bola'), b => b.getBoundingClientRect());

        var p1, p2;
        do {

            p1 = Math.floor(Math.random() * 1000);
            p2 = Math.floor(Math.random() * 500);
        }
        while (bolas.find(b => Math.sqrt((b.left - p1) * (b.left - p1) + (b.top - p2) * (b.top - p2)) < 50) !== undefined)

        var corBolinha = Math.floor(Math.random() * 256);

        bola.setAttribute("style", "left:" + p1 + "px; top:" + p2 +
            "px; background-color: rgba(" + corBolinha + ",0,0,0.3");

        document.body.appendChild(bola);

        if (bolas.length === 100) {
            clearInterval(timer);
        }
    }

    var timer = setInterval(addBola, 100);