JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">
      First box 
    </div>

    <div id="box2">
        Second box
    </div>

    <div id="box3">
        Third box
    </div>

CSS

#box1{
    background-color:orange;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}
#box2{
    background-color:blue;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}
#box3{
    background-color:green;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}

JavaScript

el=document.getElementById("box1");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.left=width*Math.random() + "px";
        el.style.top=height*Math.random() + "px";

        el=document.getElementById("box2");
        el.style.right=width*Math.random() + "px";
        el.style.top=height*Math.random() + "px";

        el=document.getElementById("box3");
        el.style.middle=width*Math.random() + "px";
        el.style.top=height*Math.random() + "px";