JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" ?>
<html>
  
  <head>
    <style>
      path.cell {
        fill: rgb(240, 240, 240);
        stroke: rgb(0, 0, 0);
        stroke-width: .25px;
      }
    </style>
  </head>
  
  <body>
    <svg width="600" height="600">
      <defs>
        <clipPath id="myClip">
          <path d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z"
          />
        </clipPath>
      </defs>
      <g id="voronoi">
        <g id="cells">
          <path class="cell" d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z"
          />
        </g>
          <g id="sites">
            <g clip-path="url(#myClip)">
              <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
                <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
              </g>
            </g>
          <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
            <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
          </g>
        </g>
      </g>
    </svg>
  </body>

</html>