JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
	<div class="circle c1 left"></div>
	<div class="circle c1 right"></div>
	<div class="circle c2 left"></div>
	<div class="circle c2 right"></div>
	<div class="circle c3 left"></div>
	<div class="circle c3 right"></div>
</div>
<div class="block">
	<div class="circleSVG c1 left"></div>
	<div class="circleSVG c1 right"></div>
	<div class="circleSVG c2 left"></div>
	<div class="circleSVG c2 right"></div>
	<div class="circleSVG c3 left"></div>
	<div class="circleSVG c3 right"></div>
</div>

CSS

.block{
	padding:20px 0;
}

.circle{
	overflow:hidden;
	display:inline-block;
	position:relative;
	height:160px;
}
.circle:before{    
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:160px;
	border-radius:100%;
	background:#369;
}
.circle.left:before{    
	left:0;
}
.circle.right:before{    
	right:0;
}

.circleSVG{
	overflow:hidden;
	display:inline-block;
	height:160px;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(255, 153, 0, 1)"/></svg>') 0 0 / cover no-repeat;
}
.circleSVG.right{    
	background-position:100% 0;
}

.c1{
	width:100px;
}
.c2{
	width:60px;
}
.c3{
	width:120px;
	height:200px;
}