JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
    <div class='cabecalho'></div>
    <div class='conteudo'>
        Conteúdo
    </div>
    <div class='clear'></div>
    <div class='rodape'></div>
</div>

CSS

html,body{
   height:100%;
}
body{
   background:lightgray;
}
.wrapper{
   width:100%;
   height:100%;
   position:relative;
   overflow:hidden;
}
.cabecalho{
   height:50px;
   background:orange;
   width:100%;
}
.conteudo{
   padding-bottom:100px;
   background:#f0f;
   height: 100%;;
}
.clear{
   clear:both;
}
.rodape{
   width:100%;
   position:absolute;
   bottom:0;
   height:40px;
   background:green;
}