JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fotonode fotopagina">
      <h2><a href="#">Testing Title</a></h2>
    </div>

<div class="fotonode fotopagina">
      <h2><a href="#">Testing Title long</a></h2>
    </div>

<div class="fotonode fotopagina">
      <h2><a href="#">Testing Title longer</a></h2>
    </div>

CSS

.fotopagina {width: 150px; background-color: black; height: 35px;}
a {color: white;}

JavaScript

(function($) {
    $.fn.textfill = function(options) {
        this.each(function() {
            var fontSize = options.maxFontPixels;
            var ourText = $('h2 a: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 > 16);
        });
        return this;
    };
})(jQuery);

$(document).ready(function() {
    $('.fotonode.fotopagina').textfill({
        maxFontPixels: 30
    });
});