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">
    <defs>
        <linearGradient id="grad1">
            <stop offset="0" />
            <stop stop-color="white" offset="50%" />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="grad2">
            <stop offset="0" />
            <stop stop-color="white" offset="  50%" />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="grad3">
            <stop offset="0" />
            <stop stop-color="white" offset="50%  " />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="grad4">
            <stop offset="0" />
            <stop stop-color="white" offset="  50%  " />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="grad5">
            <stop offset="0" />
            <stop stop-color="white" offset="  50%fnord" />
            <stop offset="1" />
        </linearGradient>
        <linearGradient id="grad6">
            <stop offset="0" />
            <stop stop-color="white" />
            <stop offset="1" />
        </linearGradient>
    </defs>
    <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" fill="url(#grad1)" />
    <text x="75" y="141">offset=50%</text>
    <rect x="175" y="25" width="100" height="75" fill="url(#grad2)" />
    <text x="225" y="141">offset="  50%"</text>
    <rect x="325" y="25" width="100" height="75" fill="url(#grad3)" />
    <text x="375" y="141">offset="50%  "</text>
    <rect x="25" y="180" width="100" height="75" fill="url(#grad4)" />
    <text x="75" y="296">offset=" 50% "</text>
    <rect x="175" y="180" width="100" height="75" fill="url(#grad5)" />
    <text x="225" y="296">offset=" 50%fnord"</text>
    <rect x="325" y="180" width="100" height="75" fill="url(#grad6)" />
    <text...

CSS

text { text-anchor: middle }