JSFiddle - React, Tailwind, and code Playground

by Javier Villa

HTML

<!DOCTYPE html>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="page">
            <div id="inner"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

CSS

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#header {
    height: 60px;
    position: relative;
    background-color: #9FFE92;
}

#footer {
    height: 60px;
    background-color: #4F3047;
}

#page {
    flex-grow: 1;
    overflow: auto;
    box-sizing: border-box;
    border: 2px solid darkgreen;
    height: 100%;
    
    display: flex;
    flex-direction: column;
}

#inner {
    height: 100%;
    border: 2px dashed red;
}


body, html {
    height: 100%;
    margin: 0px; /* Remove default margins */
}