JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" viewBox="0 0 410 497" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0 12.829)">
  <path d="m183.51 46.585a43.6 43.466 0 0 1-43.6 43.466 43.6 43.466 0 0 1-43.6-43.466 43.6 43.466 0 0 1 43.6-43.466 43.6 43.466 0 0 1 43.6 43.466zm-78.037 94.33a43.6 43.466 0 0 1-43.6 43.466 43.6 43.466 0 0 1-43.6-43.466 43.6 43.466 0 0 1 43.6-43.466 43.6 43.466 0 0 1 43.6 43.466zm-13.913-120.87v0m11.339 52.18c-3.2563 13.954-14.557 18.858-22.985 26.994l12.321 8.4918 7.9918 9.6826c4.9264-11.142 13.162-20.216 23.787-27.796-8.1475-3.5721-15.104-9.5254-21.114-17.373z" fill="#fff" fill-rule="evenodd" stroke="#00e200" stroke-dashoffset="529.13" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="paint-order:stroke fill markers"/>
  <g transform="matrix(.4472 0 0 .47948 -30.129 -32.68)" stroke-width="2.1596">
   <g fill="#fff" fill-rule="evenodd" stroke="#00d700" stroke-dashoffset="529.13" stroke-linecap="round" stroke-linejoin="round">
    <ellipse cx="341.43" cy="175.01" rx="5.7453" ry="3.8186" style="paint-order:stroke fill markers"/>
    <ellipse cx="356.88" cy="190.58" rx="5.7453" ry="3.8186" style="paint-order:stroke fill markers"/>
    <ellipse cx="346.38" cy="198.59" rx="4.2669" ry="3.0756" style="paint-order:stroke fill markers"/>
   </g>
   <path d="m347.17 124.62c-3.2327-0.14675-8.9341 1.2959-8.9151 3.7438 0.11065 14.254-0.79247 34.592-0.79247 34.592s-0.37231 0.44078-0.19813 0.59897c4.0634 3.6904 14.903 2.8088 19.019-0.89833 2.4822-2.2357 2.4804-27.069 0.39621-33.694-0.58791-1.8687-6.4518-4.2042-9.5094-4.3429z" fill="none" stroke="#00e500"/>
   <rect x="331.15" y="130.33" width="17.976" height="27.365" fill="#fff" fill-rule="evenodd" stroke="#00d700" stroke-dashoffset="529.13" stroke-linecap="round" stroke-linejoin="round" style="paint-order:stroke fill markers"/>
   <g fill="none">
    <path d="m344.79 170.44c26.621 0.2057 54.462 0.43077 67.457-0.0574 8.1603-0.30649 7.834 3.9456 8.3909 8.3172 0.2432 1.9091 0.77891 3.6137...