JSFiddle - React, Tailwind, and code Playground

by Fábio Souza

HTML

<div class="container body-content">
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/> Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    Conteúdo do corpo do documento!<br/>
    
</div>
<footer class="fixar-rodape">
    <p>&copy; Tudo o que quiser colocar aqui</p>
</footer>

CSS

html, * {
  /** Reseta os estilos **/
  margin: 0;
  padding: 0;
}
body{
  font-family: 'calibri light', calibri, arial, sans-serif;
}
div.body-content{
  /** Essa margem vai evitar que o conteudo fique por baixo do rodapé **/
  margin-bottom: 40px;
}

footer.fixar-rodape{
  border-top: 1px solid #333;
  bottom: 0;
  left: 0;
  height: 40px;
  position: fixed;
  width: 100%;
}