JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div class="row">
<h1>Title</h1>
<nav>
<ul>
<li><a href="#">Btn</a></li>
<li><a href="#">Btn</a></li>
<li><a href="#">Btn</a></li>
</ul>
</nav>
</div>

<div class="row row2">
<div class="content">
<section>
   Some Content
</section>
</div>
<footer>Footer</footer>
</div>

CSS

*
{
    margin:0;padding:0;    
}
html,body
{
    height:100%;
    width:100%;
}
body
{
    display:table;
}
.row
{
    width: 100%;
    background: yellow;
    display:table-row;

}
.row2
{
    background: pink;
    height:100%; 
    
}
.content {
    display: block;
    overflow:auto;
    height:100%;
    padding-bottom: 40px;
    box-sizing: border-box;
}
footer 
{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    background: yellow;
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
}