JSFiddle - React, Tailwind, and code Playground

by David_Barnett

HTML

<div class="main-body">
    <div class="header"></div>
    <div class="content-wrapper">
        <div class="content">sdfsdfsdf sdfh sdkh skdh skldfhklf sflskdjfkldhfkl hflkjdhfkljhas klfjahfk jhsdklfjh sakljhsadklf hsadklfhskh fklhkl hdfkhweiouw eue uqehruihfio uviuyh</div>
    </div>
    <div class="footer"></div>
</div>

CSS

.main-body {
    background-color: aqua;
    height: 100%;
    min-height: 100%;
}
.header {
    background-color: blue;
    height: 20px;
}
.content-wrapper {
    background-color: lime;
    height: 100%;
    min-height: 100%;
}
.content {
    background-color: yellow;
    height: 100%;
    min-height: 100%;
    padding-bottom: -100px;
}
.footer {
    background-color: red;
    height: 50px;
    bottom: 0px;
}
div {
    padding: 5px;
    margin: 5px;
}
* {
    position: relative;
}