JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://rawgithub.com/soulwire/fit.js/master/fit.js"></script>

CSS

.foo {

    background: #eee;
    position: relative;
    overflow: hidden;
    margin: 20px;
}

.bar {
    font-size: 18px;
    background: #e74c3c;
    text-align: center;
    position: absolute;
    color: #fff;
}

JavaScript

// Generate some elements of varying sizes for the sake of the demo.
// Really these would most likely be defined in markup
var foo, bar;
for ( var i = 0; i < 20; i++ ) {

    foo = document.createElement( 'div' );
    foo.className = 'foo';
    foo.style.width = 100 + ~~( Math.random() * 200 ) + 'px';
    foo.style.height = 100 + ~~( Math.random() * 200 ) + 'px';
    
    bar = document.createElement( 'div' );
    bar.className = 'bar';
    bar.innerText = 'bar';
    bar.style.width = 50 + ~~( Math.random() * 400 ) + 'px';
    bar.style.height = 50 + ~~( Math.random() * 400 ) + 'px';
    bar.style.lineHeight = bar.style.height;
    
    document.body.appendChild( foo );
    foo.appendChild( bar );
    
    // Now the fit.js stuff...
    
    // Comment this line out and try to write a non element specific
    // CSS rule to achieve the same effect for all elements...
    // (Aspect ratios must remain intact)
    fit( bar, foo );
}