JSFiddle - React, Tailwind, and code Playground

HTML

<div class="simplest">
    <h1>The simplest example</h1>
    
    <label>HTML</label>
    <pre>
&lt;div class="fill"&gt;
    Just create a div with some text, 
    set its width and height, 
    and call $('your query here').fill_with_text()
&lt;/div&gt;
    </pre>
    
    <label>CSS</label>
    <pre>
.fill
{
    width: 530px;
    height: 240px;
}
    </pre>
    
    <label>jQuery</label>
    <pre>
$('.fill').fill_with_text()
    </pre>
    
    <label>And here's how it looks on the screen</label>
    
    <div class="fill">
        Just create a div with some text, set its width and height, and call $('your query here').fill_with_text()
    </div>
            
    <label>And you can pass in the "collapse" flag to make the containing div collapse to the content's height</label>
    
    <div class="fill collapse">
        Create a div with text, set width and height, call $('query').fill_with_text({ collapse: true })
    </div>
</div>

<div class="another">
    <h1>Non-text content example</h1>
    
    <div class="fill">
        <img style="margin-top: 10px" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcRpC69cKG38Fw8rbsM5Nu_gTLabJJlZkniyQVBGKdVauJlxPVNt" width="100" height="100"/>
        <br/>
        Just create a div with any HTML content, set its <code>width</code> and <code>height</code>, and call <code>$('your query here').fill_with_text()</code>
    </div>
</div>

<div class="advanced">
    <h1>Advanced examples</h1>
    <span>content is centered vertically here using CSS <code>(display: table-cell)</code></span>

    <div class="centerer">
        <div>
            <div class="fill">
                OMG
            </div>
        </div>
        
        <div>
            <div class="fill">
                The quick brown fox jumps over the lazy dog (pangram)
            </div>
        </div>
        
        <div>
            <div class="fill">
                The psilocybin molecule is indirectly responsible for the hallucinogenic...

CSS

body
{
    text-align: center;
    
    margin: 100px;
}

h1
{
    font-family: Times New Roman;
    font-weight: normal;
    font-size: 80px;
}

.simplest .fill, .another .fill, .advanced .fill
{
    display: inline-block;
}

.another, .advanced
{
    margin-top: 110px;
}

.simplest .fill, .another .fill
{
    width: 530px;
    height: 240px;
    
    border: 1px solid #3f3f3f;
    background-color: #efefef;
}

.another code
{
    color: #a66c00;
}

.advanced 
{
    text-align: center;
}

.advanced .centerer > div
{
    display: table;
    width: 530px;
    height: 240px;
    
    margin: 80px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #3f3f3f;

    color: white;
    
    background: #7db9e8; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7db9e8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* IE10+ */
    background: radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    
    border-radius: 6px;
}

.advanced .fill
{
    padding-left: 30px;
    padding-right: 30px;
    
    padding-top: 20px;
    padding-bottom: 20px;
    
    width: 100%;
    height: 100%;
    
    display: table-cell;
    vertical-align: middle;
}

.advanced .fill:nth-child(1)
{
    font-size: 0px;
}

.advanced .fill:nth-child(3)
{
    font-size: 100px;
}

.advanced...

JavaScript

/*
    Based on this script by Marcus Ekwall
    http://jsfiddle.net/mekwall/fNyHs/

    Examples, support and the newest version of this script is here:
    https://github.com/kuchumovn/jquery-full-house

    Author: Nikolay Kuchumov
    github: kuchumovn
    email: [email protected]
*/

(function($)
{
    var Algorythm = 
    {
        // you can write your own algorythm
        Interface: function(options)
        {
            // called if the 'x' font size is too big, and the text with this font size doesn't fit the container
            this.too_big = function(x) {}
            
            // called if the text with font size 'x' fits the container (e.g. font_size=0 fits any container)
            this.fits = function(x) {}    
            
            // this.retry(x) function will be set automatically
        },
    
        // just for reference
        Linear: function(options)
        {
            var largest_fit = 0
            
            this.too_big = function(x) 
            {
                if (x - 1 === largest_fit)
                    return largest_fit
                    
                return this.retry(x - 1)
            }
            
            this.fits = function(x) 
            {
                largest_fit = x
                return this.retry(x + 1)
            }
        },
        
        // the faster algorythm
        Binary: function(options)
        {
            var largest_fit
            var minimum_too_big
            
            var step = options.Font_size_increment_step || 10
        
            this.too_big = function(x)
            {
                minimum_too_big = x
                
                if (largest_fit)
                {
                    if (largest_fit === x - 1)
                        return largest_fit
                        
                    return this.retry(largest_fit + (x - largest_fit) / 2)
                }
                else
                {
                    if (x ===...