JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<div id="header">
  barra de cabeçalhos - está OK!
</div>
<div id="content">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus faucibus risus, sed fermentum risus condimentum eu. Suspendisse potenti. Pellentesque vel commodo nisi. Aliquam at arcu nec enim auctor ultricies. Quisque ac leo auctor, semper nisl nec, porta dolor. Duis eget ligula non leo lacinia rhoncus eget id nisi. Sed sit amet elit mi. Aliquam at mollis neque. Vestibulum ornare imperdiet turpis, sed tincidunt mi pulvinar in. Maecenas volutpat viverra augue a tempus. Donec eu aliquet dolor.

Mauris vitae urna sodales, dignissim felis ac, porttitor mauris. Nam tortor nisi, suscipit vitae diam nec, vehicula pulvinar neque. Sed sed luctus neque, quis fermentum odio. Pellentesque eu porttitor orci, sit amet iaculis leo. Mauris in ornare massa. Phasellus dolor leo, egestas vitae orci venenatis, suscipit condimentum lacus. Sed quis nisl placerat, tristique lacus ut, bibendum diam. Cras massa lacus, consequat at scelerisque a, euismod vel neque.
Mauris vitae urna sodales, dignissim felis ac, porttitor mauris. Nam tortor nisi, suscipit vitae diam nec, vehicula pulvinar neque. Sed sed luctus neque, quis fermentum odio. Pellentesque eu porttitor orci, sit amet iaculis leo. Mauris in ornare massa. Phasellus dolor leo, egestas vitae orci venenatis, suscipit condimentum lacus. Sed quis nisl placerat, tristique lacus ut, bibendum diam. Cras massa lacus, consequat at scelerisque a, euismod vel neque.
Mauris vitae urna sodales, dignissim felis ac, porttitor mauris. Nam tortor nisi, suscipit vitae diam nec, vehicula pulvinar neque. Sed sed luctus neque, quis fermentum odio. Pellentesque eu porttitor orci, sit amet iaculis leo. Mauris in ornare massa. Phasellus dolor leo, egestas vitae orci venenatis, suscipit condimentum lacus. Sed quis nisl placerat, tristique lacus ut, bibendum diam. Cras massa lacus, consequat at scelerisque a, euismod vel neque.
Mauris vitae urna sodales, dignissim...

CSS

html, body{
 height: 100%;
}
#header {
  width: 100%;
  height: 65px;
  line-height: 65px;
  vertical-align: middle;
  overflow: hidden;
  background: #333;
}

#content {
  height: 100%;
  background: #ccc;
}

#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 15px;
  width: 100%;
  background: #434;
  padding: 6px;
}