JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox='-100 -100 200 200' xmlns='http://www.w3.org/2000/svg'>
  <style type='text/css'>
    /*<![CDATA[*/
      circle { fill:orange }
      rect, polygon, path {
          fill:none;
          stroke:black;
          vector-effect:non-scaling-stroke
      }
    /*]]>*/
  </style>
  <polygon points='22 14 -27 32 1 42 -39 22'></polygon>
  <polygon points='-34 -14 -7 -17 -28 19 -7 -5'></polygon>
  <circle cx='22' cy='14' r='3'></circle>
  <circle cx='-27' cy='32' r='3'></circle>
  <circle cx='1' cy='42' r='3'></circle>
  <circle cx='-39' cy='22' r='3'></circle>
  <circle cx='-34' cy='-14' r='3'></circle>
  <circle cx='-7' cy='-17' r='3'></circle>
  <circle cx='-28' cy='19' r='3'></circle>
  <circle cx='-7' cy='-5' r='3'></circle>
</svg>