JSFiddle - React, Tailwind, and code Playground

HTML

<h3>My skills</h3>
<div class="donut-container" style="background: #9C0;">
    <div class="donut-inner">
        <div class="donut-label">HTML</div>
    </div>
</div>

<div class="donut-container" style="background: #09C;">
    <div class="donut-inner">
        <div class="donut-label">CSS</div>
    </div>
</div>

CSS

.donut-container {
	width: 150px;
	height: 150px;
	float: left;
	-webkit-border-radius: 75px;
	-moz-border-radius: 75px;
	border-radius: 75px;
	margin-right: 20px;
}

.donut-inner {
	width: 134px;
	height: 134px;
	position: relative;
	top: 8px;
	left: 8px;
	background: #FFF;
	-webkit-border-radius: 65px;
	-moz-border-radius: 65px;
	border-radius: 65px;
}

.donut-label {
	line-height: 130px;
	text-align: center;
	font-size: 20px;
}