JSFiddle - React, Tailwind, and code Playground

by David_Barnett

HTML

<!--<div style="min-height: 100%; background-color: aqua;">
    <div style="height: auto; min-height: 100%; background-color: blue;">
        <div class="main" style="padding-bottom: 30px;">fdgdfg</div>
    </div>
    <div class="footer" style="height: 30px; background-color: red; margin-top: -30px;"></div>
</div>-->
<div class="main-body">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

CSS

.main-body {
    background-color: aqua;
}
.header {
    background-color: blue;
    min-height: 100px;
}
.content {
    background-color: lime;
    min-height: 200px;
}
.footer {
    background-color: red;
    min-height: 100px;
}
div {
    
    padding: 5px;
}
* {
    position: relative;
}