JSFiddle - React, Tailwind, and code Playground

HTML

<div class='circle-holder'>
    <div id='circle-1' class='circle'></div>
    <div id='circle-2' class='circle'></div>
    <div id='circle-3' class='circle'></div>
    <div id='circle-4' class='circle'></div>
    <div id='circle-5' class='circle'></div>
</div>



<svg id="svg-defs">
    <defs>
        <clipPath id="clip-bite-left">
            <path d="M0,30 L0,0 L202,0 L202,202 L0,202 L0,170
                    A101,101 0 0,0 0,30
            "/>
        </clipPath>
        <clipPath id="clip-bite-right">
            <path d="M202,30 L202,0 L0,0 L0,202 L202,202 L202,170
                    A101,101 0 0,1 202,30
            "/>
        </clipPath>
        <clipPath id="clip-bite-both">
            <path d="M0,30 L0,0 L202,0 L202,30
                    A101,101 0 0,0 202,170
                    L202,202 L0,202 L0,170
                    A101,101 0 0,0 0,30
            "/>
        </clipPath>

    </defs>
</svg>

CSS

.circle-holder {
    width: 860px;
}
.circle {
    width: 201px;
    height: 201px;
    border-radius: 101px;
    float: left;
    position: relative;
    overflow: hidden;
    margin-right: -30px;
}

#circle-1 {
    background-color:#25AED2; 
}
#circle-2 {
    background-color:#F1CE0D; 
}
#circle-3 {
    background-color:#26E489; 
}
#circle-4 {
    background-color:#EC1A5F; 
}
#circle-5 {
    background-color:#25C8D2; 
}

.circle + .circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -170px;
    background: #fff;
    border-radius: 101px;
}