JSFiddle - React, Tailwind, and code Playground

by Gowtham Reddy

HTML

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
          <foreignObject id="G" width="300" height="200">
            <svg>
              <rect fill="`blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
              <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>     
            </svg>
              <style>
                  #G {
                    background: #cff; border: 1px dashed black;
                  }
                  #G:hover {
                    background: #acc; border: 1px solid black;
                  }
              </style>
          </foreignObject>
        </svg>