JSFiddle - React, Tailwind, and code Playground

HTML

<section class="content">
    <ul class="examples">
        <li class="example">
            <div class="padder">
                <section>
                    <div class="padder">
                         <h1>Example</h1> 
                        <p>Lorem ipsum dolor sit amet, illum nisl eligo patria veniam qui. Nostrud
                            diam aptent iaceo importunus sed cogo, quia eros. Minim, quod nobis gemino
                            patria voco. Ad roto nisl ad consectetuer pagus comis vel nulla verto oppeto,
                            demoveo. Feugiat eros modo importunus in ad aptent abdo velit iusto jus
                            modo. Ullamcorper pneum suscipere, suscipit feugiat, exputo, vindico praemitto
                            cui.</p>
                    </div>
                </section>
            </div>
        </li>
        <li class="example">
            <div class="padder">
                <section>
                    <div class="padder">
                         <h1>Example</h1> 
                        <p>Lorem ipsum dolor sit amet, illum nisl eligo patria veniam qui. Nostrud
                            diam aptent iaceo importunus sed cogo, quia eros. Minim, quod nobis gemino
                            patria voco. Ad roto nisl ad consectetuer pagus comis vel nulla verto oppeto,
                            demoveo. Feugiat eros modo importunus in ad aptent abdo velit iusto jus
                            modo. Ullamcorper pneum suscipere, suscipit feugiat, exputo, vindico praemitto
                            cui.</p>
                    </div>
                </section>
            </div>
        </li>
        <li class="example">
            <div class="padder">
                <section>
                    <div class="padder">
                         <h1>Example</h1> 
                        <p>Lorem ipsum dolor sit amet, illum nisl eligo patria veniam qui. Nostrud
                            diam aptent iaceo...

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    font-family: sans-serif;
    font-size: 16px;
    background: #eee;
    color: #333;
    line-height: 1.7;
    padding: 1em;
}
body {
    width: 62em;
    min-width: 200px;
    max-width: 100%;
    margin: auto;
}
body, .example section {
    background: #fafafa;
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
}
div.padder {
    padding: 1em;
}
@media screen and (max-width: 300px) {
    html {
        font-size: 13px;
    }
}
.content {
    position: relative;
}
.examples {
    overflow: hidden;
    font-size: 100%;
    list-style: none;
}
.example {
    display: block;
    float: left;
    width: 33.33%;
}
.example section {
    font-size: 30%;
    cursor: pointer;
}

JavaScript

var fps = 24;

var size = {
    width: 0,
    height: 0
};

var tick = function () {
    fit();

    setTimeout(tick, 1000 / fps);
};

var fit = function () {
    var width = $(window).width();
    var height = $(window).height();

    if (width == size.width && height == size.height) {
        return;
    }

    size = {
        width: width,
        height: height
    };

    setExampleTextSize();

    $('.content').css({
        height: $('.examples').height()
    });
};

var setExampleTextSize = function () {
    var exampleFontSize = ($('.example:first-child section').width() / $('.examples').width()) * 100;
    $('.example section').css('font-size', exampleFontSize + '%').attr('data-fontsize', exampleFontSize);
};

tick();

$('.example section').on('click', function () {
    var self = $(this);
    var zoomed = self.clone();

    zoomed.css({
        'background': '#fff',
            'position': 'absolute',
            'width': self.width(),
            'height': self.height(),
            'left': self.position().left,
            'top': self.position().top
    });

    zoomed.appendTo('.content');

    var ratio = 100 / zoomed.attr('data-fontsize');

    $('.examples').animate({
        opacity: 0
    });

    $('.content').animate({
        height: self.height() * ratio
    });

    zoomed.animate({
        fontSize: '100%',
        left: 0,
        top: 0,
        width: '100%',
        height: self.height() * ratio
    }, {
        complete: function () {
            zoomed.css({
                'background': '#fff',
                    'cursor': 'pointer'
            });
        }
    });

    zoomed.on('click', function () {
        zoomed.animate({
            opacity: 0
        }, {
            complete: function () {
                zoomed.remove();
            }
        });

        $('.content').animate({
            height: $('.examples').height()
        });

        $('.examples').animate({
            opacity: 1
        });
    });
});