JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-textfill.github.io/jquery-textfill/jquery.textfill.js"></script>
 <div>
      <div>
        <label for="dyntext">Content:</label>
        <input type="text" id="dyntext" value="Hello!"></input>
      </div>
      <div>
        <label for="maxsize">Maximal font size in pixels?</label>
        <input type="text" id="maxsize" value="0"></input>
      </div>
      <hr />
      <div class="content">
        <div class="jtextfill">
          <span class="dyntextval">Hello!</span>
        </div>
      </div>
</div>

CSS

.content .jtextfill {
width: 150px;
height: 100px;
background-color: #fff;
text-align: center;
border:1px solid #333;
padding-top:40px;
padding-bottom:40px;
}

JavaScript

function update() {
  var size = parseInt($('#maxsize').val(), 10);
  if (!isNaN(size)) {
    $('.dyntextval').html($('#dyntext').val());
    $('.jtextfill').textfill({debug: true, maxFontPixels: size});
  }
}

$(function () {
  $('#maxsize').keyup(update);
  $('#dyntext').keyup(update);
  update()
});