JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box1'>&nbsp;</div>
<div id='box2'>&nbsp;</div>
<div id='box3'>&nbsp;</div>
<div id='box4'>&nbsp;</div>
<div id='box5'>&nbsp;</div>
<div id='box6'>&nbsp;</div>

CSS

div{
    position:absolute;
    width:20px;
    height:20px;
}
#box1
{
   border:1px solid red;
   right:50%;
}   
#box2
{
    border:1px solid purple;
    top:30%;
    right:10%;
}
#box3
{
    border:1px solid orange;
    top:30%;
    left:10%;
}
#box4
{
    border:1px solid red;
    top:60%;
    right:10%;
}
#box5
{
    border: 1px solid green;
    top:60%;
    left:10%
}
#box6
{
    border:1px solid red;
    top:90%;
    right:50%;
}