JSFiddle - React, Tailwind, and code Playground

HTML

<div class="meter">
   <div class="round"></div>
   <img src="http://i.stack.imgur.com/Da6qa.jpg">
   <span class="result">100<small>NPS</small></span>
</div>

SCSS

.meter{
	position: relative;
  max-width: 170px;
	.round{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: -3px;
		bottom: -14px;
		margin: auto;
		width: 81px;
		height: 81px;
		border-radius: 50%;
		background-color: #3d3d3d;
		z-index: 1;
		&:after{
			content: "";
			position: absolute;
			top: -18px;
			left: 29px;
			z-index: 2;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 10px 20px 10px;
			border-color: transparent transparent #3d3d3d transparent;
		}
	}
	> img{
		vertical-align: middle;
		width: 170px;
		margin: auto;
	}

	.result{
		position: absolute;
		top: 0;
		font-size: 30px;
		color: #FFF;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 2;
		margin: auto;
		height: 45px;
		text-align: center;
		small{
			font-size: 12px;
			margin-top: -10px;
			display: block;
		}
	}
}