JSFiddle - React, Tailwind, and code Playground

HTML

<div class=parent>
    <div class=child id=id0></div>
    <div class=child id=id1></div>
    <div class=child id=id2></div>
    <div class=child id=id3></div>
</div>

CSS

.parent {
    background-color: #FF0000;
    width: 640px;
    height: 480px;
}

.child {
    width: 16px;
    height: 16px;
}

#id0 {
    background-color: #000000;
}

#id1 {
    background-color: #404040;
}

#id2 {
    background-color: #808080;
}

#id3 {
    background-color: #c0c0c0;
}
}

JavaScript

$("#id0").position({
    my: "center center",
    at: "left+0% top+50%",
    of: $("#id0").parent(),
    collision: "none",
});

$("#id1").position({
    my: "center center",
    at: "left+25% top+51%",
    of: $("#id1").parent(),
    collision: "none",
});

$("#id2").position({
    my: "center center",
    at: "left+50% top+50.0%",
    of: $("#id2").parent(),
    collision: "none",
});

$("#id3").position({
    my: "center center",
    at: "left+75% top+50.5%",
    of: $("#id3").parent(),
    collision: "none",
});