JSFiddle - React, Tailwind, and code Playground

by Jon Lambell

HTML

<svg version="1.1" id="score" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 264 264" enable-background="new 0 0 264 264" xml:space="preserve">
<path id="base" fill="#C9CED2" d="M256,132C256,63.63,200.37,8,132,8S8,63.63,8,132c0,38.23,17.84,74.54,47.9,97.94l-2.39,3.29	l3.24,2.35l9.4-12.94l-3.24-2.35l-2.3,3.17C32.61,201.56,16,167.67,16,132C16,68.04,68.04,16,132,16s116,52.04,116,116	c0,35.67-16.61,69.56-44.61,91.46l-2.31-3.17l-3.24,2.35l9.4,12.94l3.24-2.35l-2.39-3.29C238.16,206.54,256,170.23,256,132z"/>
<text transform="matrix(1 0 0 1 66 238)" fill="#273B49" font-family="'ProximaNova-Semibold'" font-size="0.875rem">0</text>
<text transform="matrix(1 0 0 1 174 238)" fill="#273B49" font-family="'ProximaNova-Semibold'" font-size="0.875rem">700</text>
<g id="midToEnd">
	<defs>
		<path id="midToEndMask" d="M132,264C59.1,264,0,204.9,0,132S59.1,0,132,0V264z"/>
	</defs>
	<clipPath id="midToEndMask_1_">
		<use xlink:href="#midToEndMask" overflow="visible"/>
	</clipPath>
	<linearGradient id="step4_1_" gradientUnits="userSpaceOnUse" x1="228.9243" y1="235.5791" x2="228.9243" y2="92.4451">
		<stop offset="0.02" style="stop-color:#128020"/>
		<stop offset="0.98" style="stop-color:#10BD1B"/>
	</linearGradient>
	<path id="step4" clip-path="url(#midToEndMask_1_)" fill="url(#step4_1_)" d="M238.52,97.39c3.55,10.9,5.48,22.54,5.48,34.61	c0,35.74-17.25,69.62-46.15,90.64l9.41,12.94C240.28,211.56,260,172.84,260,132c0-13.8-2.2-27.09-6.26-39.55L238.52,97.39z"/>
	<linearGradient id="step3_1_" gradientUnits="userSpaceOnUse" x1="132" y1="50.6947" x2="253.7368" y2="50.6947">
		<stop  offset="0.02" style="stop-color:#88D035"/>
		<stop  offset="0.95" style="stop-color:#10BD1B"/>
	</linearGradient>
	<path id="step3" clip-path="url(#midToEndMask_1_)" fill="url(#step3_1_)" d="M132,4v16c49.68,0,91.91,32.52,106.52,77.39
		l15.22-4.94C237.03,41.17,188.78,4,132,4z"/>
</g>
<g id="startToMid">
	<defs>
		<path id="startToMidMask"...