JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">  
    <svg width="100%" height="100%" viewBox="0 -200 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text font-size="300" fill="black">Text</text>
    </svg>
</div>

<div class="b">  
    <svg width="100%" height="100%" viewBox="0 -200 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text font-size="300" fill="black">Text</text>
    </svg>
</div>

<div class="c">  
    <svg width="100%" height="100%" viewBox="0 -100 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text font-size="300" fill="black">Text</text>
    </svg>
</div>

CSS

.a {
    width: 100px;
}

.b {
    width: 300px;
}

.c {
    width: 800px;
}