JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">  
        <svg width="100%" height="100%" viewBox="0 0 1000 300"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
        </svg>
    </div>
    <div class="b">  
        <svg width="100%" height="100%" viewBox="0 0 1000 300"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
        </svg>
    </div>
    <div class="c">  
        <svg width="100%" height="100%" viewBox="0 0 1000 300"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
        </svg>
    </div>

CSS

svg {
      border:1px solid red;
    }
    .a { width: 100px; }
    .b { width: 300px; }
    .c { width: 800px; }