JSFiddle - React, Tailwind, and code Playground

HTML

<div id="withOutAntiAliasing">Anti-Aliasing is off:
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
        <g>
            <g fill="none" transform="translate(0.5, 0.5)">
                <g stroke="#000000" stroke-width="1" stroke-linecap="square">
                    <line x1="2" y1="4" x2="6" y2="4" shape-rendering="crispEdges" />
                    <line x1="4" y1="2" x2="4" y2="6" shape-rendering="crispEdges" />
                </g>
                <g stroke="#909090" stroke-width="1" stroke-linecap="square">
                    <rect x="0" y="0" width="8" height="8" shape-rendering="crispEdges" />
                </g>
            </g>
        </g>
    </svg>
</div>
<div id="withAntiAliasing">Anti-Aliasing is on:
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
        <g>
            <g fill="none" transform="translate(0.5, 0.5)">
                <g stroke="#000000" stroke-width="1" stroke-linecap="square">
                    <line x1="2" y1="4" x2="6" y2="4" />
                    <line x1="4" y1="2" x2="4" y2="6" />
                </g>
                <g stroke="#909090" stroke-width="1" stroke-linecap="square">
                    <rect x="0" y="0" width="8" height="8" />
                </g>
            </g>
        </g>
    </svg>
</div>

CSS

#withOutAntiAliasing,
#withAntiAliasing
{
    zoom: 1.5;
}