JSFiddle - React, Tailwind, and code Playground

HTML

<div class='jtextfill' style='width:300px;height:250px;'> <span>Now is a good time to party!</span>

</div>

CSS

.jtextfill {
    background-color:red;
}

JavaScript

(function ($) {
    $.fn.textfill = function (options) {
        var $this = $(this),
            fontSize = options.maxFontPixels,
            ourText = $('span:visible:first', this),
            maxHeight = $this.height(),
            maxWidth = $this.width(),
            textHeight,
            textWidth;

        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function () {
    $('.jtextfill').textfill({
        maxFontPixels: 200
    });
});