JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1"
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" 
        x="0px" y="0px" width="800" height="600" viewBox="-250 -250 800 600" xml:space="preserve" font-family="arial" font-size="14">
            
            <defs>
<g id="trans" cursor="pointer" transform="scale(0.01, 0.01)" stroke-width="2">
    <!--background, will use white fill -->
    <circle fill="white" cx="-4.1" cy="-10" r="13.7" stroke="white" pointer-events="none"/>
    <circle fill="white" cx="-4.1" cy="10" r="13.7" stroke="white" pointer-events="none"/>
    <path fill="white" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="none" d="M15.1,3.6l5.1-6.3l-7.9,1.1l2,2.7L15.1,3.6"/>
    <!--Energy receiver winding-->                 <!-- FC9D00 == orange --><!--color allways orange-->
    <circle cx="-4.1" cy="-10" r="13.7" stroke="#FC9D00" fill="white">
        <animate id="showUp" attributeName="fill" begin="showDown.end" dur="2s" values ="white; #FEEDD1; white;"/>
    </circle>
    <!--will use stroke of energy source winding--><!-- 00B0F0 == blue -->
    <g>
        <circle cx="-4.1" cy="10" r="13.7" fill="white" fill-opacity="0.7">
            <animate id="showDown" attributeName="fill" begin="0s; showUp.end" dur="2s" values ="white; #B6E8FB; white;"/>
        </circle>
        <!--to remove--><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="none" d="M-20.2,19.7l34-18.5"/><!--line form arrow-->
                        <path fill="white" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M-20.2,19.7l34-18.5 M15.1,3.6l5.1-6.3l-7.9,1.1l2,2.7L15.1,3.6"/><!--efge form arrow :*/ -->
        <circle fill="white" stroke="none" cx="-4.1" cy="0" r="27.4"  fill-opacity="0"/>
    </g>
    <!--it makes half-visible selecting effect -->
    <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
    <!-- explicitly...