JSFiddle - React, Tailwind, and code Playground

HTML

<button>Toggle</button>
<div id="root-container">
    <div id="inner-container">
        <h1>Content</h1>
        
        And when the body finally starts to let go<br/>
        let it all go at once<br/>
        not piece by piece<br/>
        but like a whole bucket of stars<br/>
        dumped into the universe<br/>
        Whoh! Watcb it go!<br/>
        Good-bye small hands, good-bye small heart<br/>
        good-bye small head<br/>
        My soul is climbing tree trunks<br/>
        and swinging from every branch<br/><br/>
        
        They're calling on me<br/>
        they're calling on me<br/><br/>
        Do you think I'm an animal?<br/>
        Am I not?<br/>
        Do you like fur<br/>
        Do you wanna come over<br/>
        Are we captive only for a short time<br/>
        Is there splendor, I'm not ashamed<br/>
        Desire shoots through me<br/>
        Like birds singing<br/>
        (The way you move no ocean's waves were ever as fluid)<br/><br/>
        
        They're calling on me<br/>
        they're calling on me<br/>
        
        I hit the mark!<br/>
        I target moon, I target sky, I target sun<br/>
        Fall down on the world before it falls on you<br/><br/>
        
        Like beggars, like Stars<br/>
        like whores, us all<br/>
        Like beggars, like dogs<br/>
        Like Stars, us all<br/><br/>
        
        Shoot straight for my heart<br/>
        (And when you were near no sky was ever quite so clear)<br/><br/>
        
        Like stars, so small<br/>
        Like us, when we fall<br/>
        Like beggars, like whores<br/>
        Like lovers, Get Up!<br/>
        Get up, too far
    </div>
</div>

<div id="footer">
    <h1>Footer</h1>
</div>

CSS

html,
body {
    height: 100%;
    margin: 0;
}

html {
    border: 5px solid yellow;
}

body {
    border: 5px solid orange;
}

button {
    position: fixed;
    top: 5px;
    left: 5px;
}

#root-container {
    border: 5px solid red;
    display: flex;
    min-height: 100%;
    background: black;
    color: white;
    margin-bottom: -100px;
}

#root-container:after {
    height: 100px;
    content: "";
    display: block;
}

#inner-container {
    box-sizing: border-box;
    border: 5px solid blue;
    min-height: 100%;
    width: 400px;
    background: green;
    color: white;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    /* Make space for the footer */
    padding-bottom: 100px;
}

.small #inner-container {
    font-size: 4px;
}

#footer {
    height: 100px;
    background: orange;
    color: black;
    position: relative;
}

h1 {
    margin-top: 0;
}

JavaScript

$('button').on('click', function () {
    $('#root-container').toggleClass('small');
});