JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<svg width="400" height="180">
    <g class="g">
        <rect class="r1" id="n-1" x="10" y="10" width="150" height="40"/>
    </g>
    <rect class="r2" id="n-2" x="10" y="60" width="150" height="40" />
    <rect class="r1" id="n-3" x="170" y="60" width="150" height="40" />
    <rect class="r2" id="n-4" x="10" y="110" width="150" height="40" />
</svg>

CSS

.r1{
    fill:gainsboro;
    stroke:aliceblue;
    stroke-width:1;
    opacity:0.5
}
.r2{
    fill:aliceblue;
    stroke:gainsboro;
    stroke-width:1;
    opacity:0.5
}