JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<svg width="400" height="180">
    <g class="g">
        <rect class="r1" id="n-1" width="150" height="40"/>
        <text class="myText" style="display: inline;" opacity="0.3" dx="24.6" dy="0.35em">Act 1</text>
    </g>
    <g class="g">
        <rect class="r1" id="n-1" width="150" height="40"/>
        <text class="myText" style="display: inline;" opacity="0.3" dx="24.6" dy="0.35em">Act 1</text>
    </g>
    <g class="g">
        <rect class="r1" id="n-1" width="150" height="40"/>
        <text class="myText" style="display: inline;" opacity="0.3" dx="24.6" dy="0.35em">Act 1</text>
    </g>
</svg>

CSS

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