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: 1200px;
}
.circle {
    _float: left;
    width: 201px;
    height: 201px;
    border-radius: 101px;
    display: inline-block;
    position: relative;
}

#circle-1 {
    background-color:#25AED2; 
}
#circle-2 {
    background-color:#F1CE0D; 
    left: -30px;
}
#circle-3 {
    background-color:#26E489; 
    left: -60px;
}
#circle-4 {
    background-color:#EC1A5F; 
    left: -90px;
}
#circle-5 {
    background-color:#25C8D2; 
    left: -120px;
}

#circle-1 {
    clip-path: url(#clip-bite-right);
}
#circle-2, #circle-3, #circle-4  {
    clip-path: url(#clip-bite-both);
}
#circle-5 {
    clip-path: url(#clip-bite-left);
}