JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<div class="outer"><div class="inner"></div></div>

CSS

body {
	background: #333;
}

div.outer {
	display: inline-block;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	overflow: hidden;
}

div.inner {
	display: inline-block;
	width: 100%;
	height: 100px;
	border-top: 20px solid #333;
	border-bottom: 20px solid #333;
	margin-top: 55px;
	background: yellow;
}