JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="wrapper">
    <div class="header">
        Header
    </div>
    <div class="content">
        <div class="inner">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum at nisl non placerat. Integer posuere orci id gravida egestas. Donec non sodales dolor. Ut dui nisl, gravida id risus et, rhoncus fringilla mi. Proin quis egestas velit. Donec gravida urna vitae neque viverra, convallis aliquet lorem consectetur. Ut mollis justo eu odio lacinia, mollis efficitur turpis porttitor. Proin non porta nisl. Integer non scelerisque odio, at dictum arcu. Vivamus non ante felis. Nam lobortis, mauris nec posuere vestibulum, ligula neque sagittis odio, eget congue quam nibh quis urna. In consequat pharetra lacus non viverra. Curabitur porttitor, libero semper mattis egestas, erat dolor dapibus leo, et finibus lacus erat ut ipsum.
            </p>
            <p>
                Integer efficitur, est ac sollicitudin vulputate, purus mauris pellentesque ante, commodo dictum quam nisl a nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus condimentum, ante vel posuere gravida, urna neque molestie nisi, sed tempor massa massa non nulla. Fusce ut aliquet urna. Morbi ut ipsum eget augue pulvinar feugiat et sit amet nibh. Pellentesque lacinia, diam a aliquam dignissim, nulla dolor gravida nisl, a rhoncus metus metus in augue. Cras vulputate ut odio bibendum rhoncus. Cras sodales molestie felis eu accumsan. Nam faucibus erat eu aliquet placerat. Aenean cursus lacus id dolor gravida pretium. Quisque dignissim, ex mattis malesuada sagittis, leo urna malesuada quam, quis finibus justo neque eget nulla.
            </p>
            <p>
                Curabitur lacinia, purus non porta venenatis, justo sem fringilla quam, in viverra tortor elit a neque. Nam vestibulum nec turpis nec cursus. Morbi a tellus interdum, mollis sapien eget, malesuada magna. Proin consequat dui porta, rhoncus metus eget,...

CSS

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

.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.header, .content, .footer {
    display: table-row;
}

.header, .footer {
    height: 0;
    background: #eee;
}

.inner {
    height: 100%;
    overflow: auto;
}