JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-1 -1 2 2">
  <g transform="scale(0.97)">
    <g transform="rotate(-55 0 0)">
      <path d="M 0 -1 A 1 1 0 0 1 0.8 0.6 L 0 0" fill-opacity="0.85" fill="gold" />
      <path d="M 0.8 0.6 A 1 1 0 0 1 -0.4 0.9 L 0 0" fill-opacity="0.85" fill="darkred" />

      <line x1="0" x2="0" y1="0" y2="-0.6" stroke="black" stroke-width="0.05" />
    </g>
    <path stroke-dasharray="0.05,0.05" d="M0 0 l0 1" stroke="darkred" stroke-width="0.025" stroke-opacity="0.85" />
    <g transform="rotate(45 0 0)">
      <path stroke-dasharray="0.05,0.05" d="M0 0 l0 1" stroke="gold" stroke-width="0.025" stroke-opacity="0.85" />
    </g>
    <g transform="rotate(60 0 0)">
      <line x1="0" x2="0" y1="0" y2="-0.9" stroke="black" stroke-width="0.03" />
    </g>
    <circle r="1" stroke-width="0.05" fill-opacity="0" stroke="black" stroke-alignment="inner"  />
    <circle r="0.05" />
    <defs>
      <g id="tick" transform="translate(0, -0.9)">
        <line x1="0" x2="0" y1="0" y2="0.15" stroke="black" stroke-width="0.03" />
      </g>
    </defs>
    <use href="#tick" />
    <use href="#tick" transform="rotate(30 0 0)" />
    <use href="#tick" transform="rotate(60 0 0)" />
    <use href="#tick" transform="rotate(90 0 0)" />
    <use href="#tick" transform="rotate(120 0 0)" />
    <use href="#tick" transform="rotate(150 0 0)" />
    <use href="#tick" transform="rotate(180 0 0)" />
    <use href="#tick" transform="rotate(210 0 0)" />
    <use href="#tick" transform="rotate(240 0 0)" />
    <use href="#tick" transform="rotate(270 0 0)" />
    <use href="#tick" transform="rotate(300 0 0)" />
    <use href="#tick" transform="rotate(330 0 0)" />
  </g>
</svg>
</body>
</html>