JSFiddle - React, Tailwind, and code Playground

by Aramil Rey

HTML

<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>

CSS

.circle {
    display: inline-block;
    border-radius: 200px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;    
}
#bigCircle {
    border-radius: 200px;    
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background-color: brown;
}
#bottom {
    margin: 50px calc(50% - 50px);
}
#left {
    margin: -50px calc(25% - 50px);   
}
#right {
    margin: -50px calc(75% - 50px);
}