JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="header">
  barra de cabeçalhos - está OK!
</div>


<div id="content">
  área de conteúdo. Deverá preencher 100% da área disponivel entre o header e o footer
</div>

<div id="footer">
  barra de rodapé, fixo no bottom da página, está OK
</div>
</body>

CSS

#header {
    width: 100%;
    height: 65px;
    line-height: 65px;
    vertical-align: middle;
    overflow: hidden;
}


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

#content {
    height: calc(100% - 80px);
   	//height: 100%;
  background-color: gold;
}


html, body {
  height: 100%;
  margin:0px;
  padding:0px;
}