JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span>Hola Pepe</span>
</div>

CSS

div {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}

JavaScript

$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var 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;
}

$('div').textfill({ maxFontPixels: 500 });