JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<svg id="mySVG" width="500" height="500">
    <circle cx=230 cy=190 r=75 stroke="black" stroke-width="3px" fill-opacity="0.0" /> 
    <circle cx=230 cy=180 r=20 fill-opacity="0.6" fill="red" />    
    <circle cx=250 cy=200 r=20 fill-opacity="0.6" fill="green" />
    <circle cx=210 cy=200 r=20 fill-opacity="0.6" fill="blue" />
    
    <circle cx=400 cy=310 r=75 stroke="black" stroke-width="3px" fill-opacity="0.0" /> 
    <circle cx=400 cy=300 r=20 fill-opacity="0.6" fill="red" />    
    <circle cx=420 cy=320 r=20 fill-opacity="0.6" fill="green" />
    <circle cx=380 cy=320 r=20 fill-opacity="0.6" fill="blue" />    
</svg>

CSS

#mySVG {
    border: solid thin black;
}