JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative;display:inline-block">
  <!-- This textarea allows the content to be resizeable-->
  <textarea readonly="" style="width:300px;height:200px"></textarea>
  <div style="
    position: absolute;
    width: calc(100%-.6em);
    width: calc(100%-.6em);
    overflow: hidden;
    top: 0;
    left:0
  ">
    <!-- This iframe allows us to scale based on size of container -->
    <iframe frameborder="0" allowTransparency="true" style="
      width: 100%;
      height: 100%;
      overflow: hidden
    " srcdoc="
      &lt;div style=&quot;
        font-size: 7vw;
        text-align: center
      &quot;&gt;
        Dynamically<br />Scaled<br />Text<br /><br />
        Resize Me!
      &lt;/div&gt;
    "></iframe>
  </div>
</div>