JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<svg height="22px" version="1.1" viewBox="0 0 22 22" width="22px" ><title/><defs><path d="M4.5,11.5 L4.5,10.5 L10.5,10.5 L10.5,4.5 L11.5,4.5 L11.5,10.5 L17.5,10.5 L17.5,11.5 L11.5,11.5 L11.5,17.5 L10.5,17.5 L10.5,11.5 L4.5,11.5 Z M11,22 C17.0751325,22 22,17.0751325 22,11 C22,4.92486745 17.0751325,0 11,0 C4.92486745,0 0,4.92486745 0,11 C0,17.0751325 4.92486745,22 11,22 L11,22 Z M11,21 C16.5228478,21 21,16.5228478 21,11 C21,5.47715225 16.5228478,1 11,1 C5.47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 L11,21 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="#69c" ><g id="circle_add_plus_outline_stroke"><use fill="#000000" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1"/></g></g></svg>

<svg width="30" height="30">
<circle cx="15" cy="15" r="12"
    style="stroke: #69c;
           fill:white"/>
</svg>


<svg width="400" height="180">
  <rect width="40" height="40" style="fill:white;stroke:black;stroke-width:1;fill-opacity:1;stroke-opacity:0.5">  
</svg>
    
    <svg>
  <rect x="50" y="20" rx="5" ry="5" width="40" height="40" style="fill:white;stroke:black;stroke-width:1;opacity:1">
  Sorry, your browser does not support inline SVG.
</svg>

<svg>
  <rect x="50" y="20" rx="5" ry="5" width="40" height="40" style="fill:red;stroke:black;stroke-width:1;opacity:1">
  Sorry, your browser does not support inline SVG.
</svg>