JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"     
     x="0px" 
     y="0px"
     width="400px" 
     height="400px" 
     viewBox="0 0 400 400" 
     xml:space="preserve">
    <rect x="0" y="0" width="100" height="100" style="stroke:rgb(0, 0, 0);fill: none;" />
    <rect x="40" y="40" width="40" height="40" style="stroke:rgb(0, 0, 255);fill: none;" />       
      
    <g transform="scale(4,4)">
      <rect x="0" y="0" width="100" height="100" style="stroke:rgb(0, 0, 255);fill: none;" />  
        
        <g transform="scale(0.25,0.25) translate(30, 30)">  
          <rect x="10" y="10" width="10" height="10" style="fill:rgb(0, 0, 255);" />
       </g> 
    </g>
    <!-- <rect x="10" y="10" width="10" height="10" style="fill:rgb(255, 0, 0);" /> -->
         
</svg>