JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1">
	<div class="ele" id="one"><a class="label-wrapper" href="#tab-one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></a></div>
  <div class="ele" id="two"><a class="label-wrapper" href="#tab-two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></a></div>
  <div class="ele" id="three"><a class="label-wrapper" href="#tab-three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></a></div>
	<div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
	<div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
	<div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
	<div class="arrow"></div>
	<div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
	<p> 
		<span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span>
	</p>
</div>
<div class="wrapper">
	<div class="tab">
		<input name="tabs" class="input" id="tab-one" type="checkbox"/>
		<label class="label" for="tab-one">Select A Top Team</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-two" type="checkbox" />
		<label class="label" for="tab-two">Get Off To A Great Start</label>
		<div class="tab-content">
			<div class="container">
				<p>Content goes here</p>
			</div>
		</div>
	</div>
	<div class="tab">
		<input name="tabs" class="input" id="tab-train"...

CSS

.container1 {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scale(0.85);
}
.ele,
.arrow,
.circle {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
}
#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
    display: inline-block;
    background-color: #1f497d;
    width: 105px;
    height: 50px;
    border-width: 2px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 7px;
    box-shadow: 0px 1px 5px #888888;
    z-index: 3;
}
.ele:hover {
    cursor: pointer;
    transform: scale(1.019);
    border-color: f4f4f4;
    background-color: #214d84;
    box-shadow: 0px 2px 9px #888888;
    zoom: 1.02;
}
.circle {
    background-color: #006850;
    width: 85px;
    height: 85px;
    border-width: 3px;
    border-style: solid;
    border-color: #fefefe;
    border-radius: 50%;
    box-shadow: 0px 1px 5px #888888;
}
.arrow {
    color: #cccfd7;
    width: 250px;
    height: 250px;
    border: 17px solid;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: -17px;
}
#two:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(24deg);
}
#three:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(66deg);
}
#four:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    transform: rotate(25deg);
}
#five:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform:...