<div class="box dar">
<div class="cir lgt"></div>
</div>
<div class="box lgt">
<div class="cir dar"></div>
</div>
<div class="box dar">
<div class="cir lgt"></div>
</div>
<style>
body {
background: #4A9A86;
margin: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
}
.dar {background:#4C4C6B}
.lgt {background:#FAE29E}
.box {
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.cir {
width: 50%;
height: 50%;
border-radius: 50%;
}
</style>