JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
    <defs><filter id="Darker">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values="0.3 0 0 0 0
                   0 0.3 0 0 0
                   0 0 0.3 0 0
                   0 0 0 0.8 0"/>
    </filter></defs>
    <g id="g1" transform="translate(60,60)"> <!-- top left -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g2" transform="translate(220,60)"><!-- top right -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g3" transform="translate(60,200)"><!-- bottom left -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
    <g id="g4" transform="translate(220,200)"><!-- bottom right -->
        <circle r="40" /><rect width="80" height="60" />
    </g>
</svg>

CSS

body { background:url(http://phrogz.net/tmp/grid.gif) }

circle { fill:red }
rect { fill:blue }

#g2 * { opacity:0.5 }
#g3   { opacity:0.5 }
#g4   { filter:url(#Darker) }