JSFiddle - React, Tailwind, and code Playground
HTML
<svg viewBox="-2 -2 204 204">
<g fill="none" stroke-width="2" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 1 0 0,100" stroke="#44c4fa" />
<path d="M 0,100 A 100,100 1 0 0 100,0" stroke="url(#gradient)" />
</g>
</svg>
<svg width="0" height="0">
<defs>
<linearGradient id="gradient" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#44c4fa" />
<stop offset="100%" stop-color="#44c4fa" stop-opacity="0" />
</linearGradient>
</defs>
</svg>