JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p>Zoom in &gt; 100%: The red SVG elements become larger than the other SVG elements.</p>
	<p>Zoom out &lt; 100%: The red SVG elements become smaller than the other SVG elements.</p>
	<svg class="green" version="1.1" width="32px" height="32px">
	    <rect x="10" y="10" width="12" height="12"/>
        <text x="10" y="22">A</text>
	</svg>
    <svg class="red" version="1.1" width="2em" height="2em">
	    <rect x="10" y="10" width="12" height="12"/>
        <text x="10" y="22">A</text>
    </svg>
    <svg class="red" version="1.1" width="2em" height="2em" viewbox="0 0 32 32">
	    <rect x="10" y="10" width="12" height="12"/>
        <text x="10" y="22">A</text>
    </svg>
    <svg class="purple" version="1.1"> <!--css width : 2em; height : 2em; -->
	    <rect x="10" y="10" width="12" height="12"/>
        <text x="10" y="22">A</text>
    </svg>
</body>

CSS

body {
    font-size : 16px;
    font-family : "Times New Roman";
}

.green {
    background : green;
}

.red {
    background : red;
}

.purple {
    background : purple;
    width : 2em;
    height : 2em;
}

rect {
    stroke : yellow;
    fill : none;
}

text {
    fill : cyan;
}