JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">menu</div>
				<div id="conteudo_wrapper">
					<div id="conteudo_submenu">conteudo_submenu</div>
					<div id="conteudo_links">conteudo_links</div>
					<div id="conteudo_texto">conteudo_texto</div>
				</div>
				<div id="footer">Todos os direitos reservados.	</div>

CSS

body{
 		 height: 100%;
		width:100%;
		margin: 0; 
		padding: 0; 
 }

 #menu{
 		height: 70px;
 		line-height: 100px;
 		text-align: center;
		background-color: red;
 }
 #conteudo_wrapper{
		/*outline: 1px solid black;*/
				
		width: 50%;
		margin: 0 auto;		
 }

#conteudo_submenu{
		height: 25px;
		line-height: 30px;
 		text-align: center;
 		background-color: brown;
}
#conteudo_links{
		width: 100px;
		float: left;
		background-color: blue;
}
#conteudo_texto{
		width: 100%;
		background-color: green;
}

/** problema com o footer / position:absolute***/
#conteudo_links,#conteudo_texto{
		height: 500px;		
}

 #footer{ 	
 		height: 70px;
 		line-height: 100px;
 		text-align: center;
 		background-color: gray;
 		/*
 		position: absolute;
 		bottom: 0;*/

 		width: 100%;
 }