JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
	<li class="menu-item"><a href="#" class="menu-link"></a></li>
</ul>

CSS

.menu {
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 25px;
	counter-reset: menu;
	font-size: 1.5rem;
}
.menu-item {
	position: relative;
	width: 120px;
}
.menu-item:nth-child(n + 2):after {
	content: "";
	position: absolute;
	right: -100%;
	left: 0;
	border-radius: 50%;
	border: 1px solid #369;
}
.menu-item:nth-child(2n):after {
	clip: rect(150px, 90px, auto, auto);
	top: -100%;
	bottom: 0;
}
.menu-item:nth-child(2n + 1):after {
	clip: rect(0, 90px, 90px, auto);
	top: 0;
	bottom: -100%;
}
.menu-item:nth-child(n + 2):before {
	content: "";
	display: block;
	padding: 100% 0 0;
}
.menu-item:nth-child(2n) {
	text-align: right;
}
.menu-link {
	position: absolute;
	bottom: -25px;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	border: 4px solid #369;
	border-radius: 50%;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
	color: #369;
}
.menu-item:nth-child(2n) .menu-link {
	right: -25px;
}
.menu-item:nth-child(2n + 1) .menu-link {
	left: -25px;
}
.menu-link:before {
	content: counter(menu);
	counter-increment: menu;
}