JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="200 150" >
 <defs>
 <g id="dscn.n" cursor="pointer">
     <rect x="-0.63" y="-0.82" width="1.26" height="1.64" fill="white" stroke-width="0.0" rx="0.12" pointer-events="none" />
     <g>
         <rect x="-0.63" y="-0.82" width="1.26" height="1.64" opacity="0.15"  stroke-width="0.0" rx="0.12" >
             <!--it makes half-visible selecting effect -->
             <animate attributeType="CSS"
             attributeName="opacity"
             to="0.1" dur="0.5s"
             begin="mouseover" fill="freeze" />
             <animate attributeType="CSS"
             attributeName="opacity"
             to="0.15" dur="0.5s" 
             begin="mouseout" fill="freeze" />
         </rect>
         
         <line x1="0" y1="0.6" x2="0.5" y2="-0.25" stroke-width="0.22" stroke-linecap="round" pointer-events="none" /><!-- off -->
         <line x1="-0.5" y1="-0.73" x2="0.5" y2="-0.73" stroke-width="0.22"  stroke-linecap="round"  pointer-events="none"/><!-- left vertical -->
         
         <circle cx="0.0" cy="0.61" r="0.215"                                 stroke-width="0" stroke-miterlimit="10" pointer-events="none"/><!-- dot -->
         <circle cx="0.0" cy="0.61" r="0.13" fill="white" fill-opacity="0.8" stroke-width="0" stroke-miterlimit="10" pointer-events="none"/><!-- dot -->
         
         <!--it scales a few times after change committed to this element -->
         <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
         
         <!--it animates scale up and scale down onclick -->
         <animateTransform attributeName="transform" attributeType="XML"
         type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
         fill="freeze"/>
        ...