JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div class="content">
    <div class="square"></div>
    <p>This is some additional text content.</p>
    <p>This is another line of text.</p>
    <p>This is also a line of text.</p>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
    -moz-transform-origin: center top;
      -o-transform-origin: center top;
}
.content {
    width: 600px;
    margin: 0 auto;
}
.square {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #7ad;
}
p {
    color: #000;
    text-align: center;
}

JavaScript

function zoomPage() {
    var $square = $('.square');

    var viewportHeight = $(window).height();
    var squareHeight = $square.height();

    // Zoom out
    if (squareHeight > (viewportHeight * 0.95)) {
        var pageHeight = $(document).height();
        var desiredSquareHeight = viewportHeight * 0.95;
        var desiredPageHeight = (desiredSquareHeight / squareHeight) * pageHeight;
        var zoom = (desiredPageHeight / pageHeight);
    }
    // Reset the zoom
    else {
        var zoom = 1;
    }

    $('body').css('zoom', zoom);
    $('body').css('-moz-transform', 'scale(' + zoom + ')');
    $('body').css(  '-o-transform', 'scale(' + zoom + ')');
}

// When the browser is resized
$(window).on('resize', function(){ zoomPage(); });

// When the page first loads
$(document).ready(function(){
    zoomPage();
});