JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>Not working: margin as y-value:</p>
    <svg style="height: 100px; border: 1px solid black">
        <text fill="#000" x="10" y="10" font-size="50" font-family="Arial">
            <tspan>The quick brown fox jumps over the lazy dog</tspan>
        </text>    
    </svg>
</div>

<div>
    <p>Not working: margin + font size as y-value:</p>
    <svg style="height: 100px; border: 1px solid black">
        <text fill="#000" x="10" y="60" font-size="50" font-family="Arial">
            <tspan>The quick brown fox jumps over the lazy dog</tspan>
        </text>    
    </svg>
</div>

<div>
    <p>Desired outcome:</p>
    <svg style="height: 100px; border: 1px solid black">
        <text fill="#000" x="10" y="48" font-size="50" font-family="Arial">
            <tspan>The quick brown fox jumps over the lazy dog</tspan>
        </text>    
    </svg>
</div>