JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='pie'>
	<li class='slice1'><div class='slice-contents1'>#</div></li>
	<li class='slice2'><div class='slice-contents2'>#</div></li>
	<li class='slice3'><div class='slice-contents3'>#</div></li>
	<li class='slice4'><div class='slice-contents4'>#</div></li>
	<li class='slice5'><div class='slice-contents5'>#</div></li>
	<li class='slice6'><div class='slice-contents6'>#</div></li>
	<li class='slice7'><div class='slice-contents7'>#</div></li>
	<li class='slice8'><div class='slice-contents8'>#</div></li>
	

<ul>

CSS

body { overflow: hidden; }

.pie {
	position: relative;
	margin: 1em auto;
	padding: 0;
	width: 20em; height: 20em;
	top: 100pt;
	border-radius: 50%;
	list-style: none;
}


.slice1 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(-22.5deg) 
	skewY(0deg); 
}

.slice2 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(22.5deg) 
	skewY(0deg); 
}

.slice3 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(67.5deg) 
	skewY(0deg); 
}


.slice4 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(112.5deg) 
	skewY(0deg); 
}


.slice5 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(157.5deg) 
	skewY(0deg); 
}

.slice6 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(202.5deg) 
	skewY(0deg); 
}

.slice7 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(247.5deg) 
	skewY(0deg); 
}


.slice8 {
	overflow: hidden; /**/
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%; 
	transform: rotate(-112.5deg); 
}



.slice-contents1 {
	position: absolute;
	left: -100%;
	width: 200%; height: 200%;
	border-radius: 50%;
	background: #ffff4d;
	text-align: center;
	transition: background-color .5s;
}

.slice-contents2 {
	position: absolute;
	left: -100%;
	width: 200%; height: 200%;
	border-radius: 50%;
	background: #9AC147;
	text-align: center;
	transition: background-color .5s;
}

.slice-contents3 {
	position: absolute;
	left:...