JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1"
     style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;"
     xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
    <desc>Created with Highcharts 5.0.12</desc>
    <defs>
        <clipPath id="highcharts-dyldpr7-1">
            <rect x="0" y="0" width="580" height="332" fill="none"></rect>
        </clipPath>
    </defs>
    <rect fill="#ffffff" x="0" y="0" width="600" height="400" rx="0" ry="0"></rect>
    <rect fill="none" x="10" y="53" width="580" height="332"></rect>
    <rect fill="none" x="10" y="53" width="580" height="332"></rect>
    <g>
        <g
            transform="translate(10,53) scale(1 1)">
            <path fill="#90ed7d"
                  d="M 159.60834442851936 206.8871519782637 A 134 134 0 0 1 221.29102570018546 60.95619594838047 L 221.29102570018546 60.95619594838047 A 134 134 0 0 0 159.60834442851936 206.8871519782637 Z"
                  fill-opacity="0.25"></path>
            <path fill="#7cb5ec"
                  d="M 289.9727077907049 42.00000277934589 A 134 134 0 0 1 335.4187604538397 302.0679824492988 L 317.2512562723038 251.64078946957932 A 80.4 80.4 0 0 0 289.9836246744229 95.60000166760753 Z"
                  transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
            ></path>
            <path fill="#434348"
                  d="M 335.2926697830234 302.11333816819695 A 134 134 0 0 1 159.6392967711721 207.01752816852851 L 211.78357806270327 194.6105169011171 A 80.4 80.4 0 0 0 317.17560186981405 251.66800290091817 Z"
                  transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
            ></path>
            <path fill="#90ed7d"
                  d="M 159.60834442851936 206.8871519782637 A 134 134 0 0 1 221.29102570018546 60.95619594838047 L 248.77461542011127 106.97371756902828 A 80.4 80.4 0 0 0 211.7650066571116...