JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg width=500 height=500>
  <circle cx="100" cy="100" r="50" fill=none stroke=red></circle>
  <circle cx="100" cy="100" r="50" stroke-width="5" fill=none stroke=red stroke-dasharray="0 50 20 9999"></circle>
  <foreignObject x=70 y=90 width=60 height=20>
    <input style="width: 100%; height: 100%;">
  </foreignObject>
</svg>

CSS

* {
  box-sizing: border-box;
}