JSFiddle - React, Tailwind, and code Playground

HTML

<!-- content to be placed inside <body>…</body> -->
<ul class="circle">
	<li><div class="text">here will be some text</div></li>
    <li><div class="text">another part of text</div></li>
    <li><div class="text">third part of text</div></li>
   

<ul>

CSS

.circle {
	position: relative;
	padding: 0;
    margin: 1em auto;
	width: 20em;
    height: 20em;
	border-radius: 50%;
	list-style: none;
    overflow: hidden;
    transform: rotate(-70deg);
}
li {
	overflow: hidden;
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%;      
}
.text {
position: absolute;
 left: -50%;
   top: 10%;
    right: 70%;
    width: 200%;
    height: 200%;
    text-align: center;
  -webkit-transform: skewY(60deg) rotate(15deg);
    -ms-transform: skewY(60deg) rotate(15deg);
    transform: skewY(25deg) rotate(10deg);
    padding-top: 70px;
}

li:first-child {
    -webkit-transform: rotate(0deg) skewY(-60deg);
    -ms-transform: rotate(0deg) skewY(-60deg);
	transform: rotate(60deg) skewY(162deg);     
}
li:nth-child(2) {
    -webkit-transform: rotate(30deg) skewY(-60deg);
    -ms-transform: rotate(30deg) skewY(-60deg);
	transform: rotate(120deg) skewY(162deg);     
}
li:nth-child(3) {
    -webkit-transform: rotate(60deg) skewY(-60deg);
    -ms-transform: rotate(60deg) skewY(-60deg);
	transform: rotate(180deg) skewY(162deg);    
}

li:first-child .text {
    background: green; 
}
li:nth-child(2) .text {
	background: tomato; 
}
li:nth-child(3) .text {
	background: aqua; 
}