JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <svg viewbox="0 0 100 100" class="svgha">
        <circle cx="50" cy="50" r="20" stroke="red" stroke-width="40" stroke-dashoffset="70" stroke-dasharray="170 20"/>
    </svg>
<div>

CSS

.wrapper {
    width: 100px;
    height: 100px;
    background: blue;
}
.svgha {
    fill: none;
}