JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
<div class="circle"></div>
<div class="triangle"></div>
</div>
<div id="second">
<div class="circle"></div>
<div class="triangle"></div>
</div>


<div class="circle"></div>
<div class="triangle"></div>

CSS

.circle {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    background: #D0CAC5;
}
.triangle {
    width: 56px;
    height: 0;
    margin-top: -25px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 100px solid #D0CAC5;
}
#first { 
    position: absolute;
    top: 3px;
    left: 127px;
    -webkit-box-reflect: below 0px;
    z-index: 1;
}
#second {
    z-index: 0;
    -webkit-transform: rotate(300deg);
    -webkit-box-reflect: below 0px;
    position: absolute;
    top: 30px;
    left: 70px;
}
#third {
    z-index: 0;
    -webkit-transform: rotate(240deg);
    -webkit-box-reflect: below 0px;
    position: absolute;
    top: 98px;
    left: 73px;
}