JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<div class="pie-container">
    <div class="pie pie1">A</div>
    <div class="pie pie2">B</div>
    <div class="pie pie3">C</div>
    <div class="pie pie4">D</div>
</div>

CSS

.pie-container{
	position:relative;
	background-color:#fafafa;
	left:100px;
	top:20px;
}

.pie{
	width:160px;
	height:160px;
	border-radius:0px;
	position:absolute;
	box-shadow:inset 0px 0px 20px rgba(0,0,0,0.4);
	border:1px solid rgb(0, 0, 0);
	text-align:center;
	color:#666;
	font-family:Helvetica;
	font-size:16px;
	font-weight:bold;
	line-height:160px;
}

.pie1{
	background-color:rgba(0, 255, 0, 0.3);
	border-top-left-radius:160px;
}

.pie2{
	background-color:rgba(0, 0, 255, 0.3);
	border-top-right-radius:160px;
	left:165px;
	width:155px;
	height:155px;
}

.pie3{
	background-color:rgba(255, 0, 0, 0.3);
	border-bottom-right-radius:160px;
	left:160px;
	top:160px;
}

.pie4{
	background-color:rgba(0, 0, 0, 0.4);
	border-bottom-left-radius:160px;
	top:160px;
}