JSFiddle - React, Tailwind, and code Playground

HTML

<div class="svg-conatiner">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
    <g stroke="#ccc">
      <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
    </g>
    <g stroke="#ccc">
      <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
    </g>
    <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
    <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
    <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text>
    <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
  </svg>
</div>

CSS

.svg-conatiner {
   max-height: 300px;
   width: 200px;
 }