JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="450px" height="325px" viewBox="0 0 450 325" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve">
    <rect x="1" y="1" width="448" height="323" fill="none" stroke="blue" stroke-width="1" />
    
    <rect x="25" y="25" width="100" height="75" rx="20" />
    <text x="75" y="141">rx=20</text>
    <rect x="175" y="25" width="100" height="75" rx="  20" />
    <text x="225" y="141">rx="  20"</text>
    <rect x="325" y="25" width="100" height="75" rx="20  " />
    <text x="375" y="141">rx="20  "</text>
    <rect x="25" y="180" width="100" height="75" rx="  20  " />
    <text x="75" y="296">rx=" 20  "</text>
    <rect x="175" y="180" width="100" height="75" rx="  20fnord" />
    <text x="225" y="296">rx=" 20fnord"</text>
    <rect x="325" y="180" width="100" height="75" rx="20px  " />
    <text x="375" y="296">rx="20px  "</text>
    </g>
</svg>

CSS

text { text-anchor: middle }