JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headerBar">
			
			<ul class="login-ul">
				<li><a href="#">Cadastro</a></li>
				<li><a href="#">Login</a></li>
			</ul>
		
		</div>

		<div id="header">
			<div id="logo">
				Logotipo
			</div>
		
			<div id="busca">
				<form name="busca" action="#">
					<input placeholder="Pesquisar..." type="text">
				</form>
			</div>
		
		</div>
		
		<div id="contentWrapper">
			<div id="sideBar">
			
				<div class="sidebarBox"></div>
			
				<div class="sidebarContent">
			
					<h4>Índice</h4>
				
					<ul class="tree">
						<li><a href="#sinopse">Sinopse</a></li>
						<li><a href="#tropas">Tropas</a></li>
						<li><a href="#">Geladeira</a>
							<ul>
								<li><a href="#logica">Lógica</a></li>
								<li><a href="#genio">Gênio</a></li>
								<li class="last"><a href="#horror">Horror</a></li>
							</ul>
						</li>
						<li><a href="#notas">Notas</a></li>
						<li><a href="#midia">Mídia</a></li>
						<li class="last"><a href="#referencias">Referências</a></li>
					</ul>
				</div>
			</div>
		
			<div id="mainBody"></div>
		
			<div id="infoBar">			
				<div class="sidebarBox"></div>
				3º Column
			
			</div>
		</div>
		
		<div id="footer"></div>
	</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	font:  normal normal 14px/20px Helvetica, Arial, sans-serif;
}
		
h1 { }
h2 { }
h3 { }
h4 { 
	font-size: 14px; 
	font-weight: bold; 
	text-transform: uppercase;
	padding-top: 10px;
	border-bottom: 2px solid #2a558c;
	margin-bottom: 10px;
}
h5 { }
h6 { }

a {
	text-decoration: none;
	color: #2e62a6;
}

a::linked {
	text-decoration: none;
	color: #2e62a6;
}

a::visited {
	text-decoration: none;
	color: #2e62a6;	
}

a::active {
	text-decoration: none;
	color: #2e62a6;
}

a::hover {
	color: #2a558c;
}
		
#headerBar {
	background-color: #323540;
	height: 30px;
	width: 100%;
}
			
#header {
	background-color: #f7f7ed;
	height: 125px;
	width: 100%;
	line-height: 1;
	position: relative;
}
			
#contentWrapper {
	display: table;
	border-spacing: 0;
	width: 100%;
	height: 500px;
}
			
#contentWrapper > div {
	display: table-cell;
    vertical-align: top;
}
			
#sideBar {
	background-color: #E4E5DD;
	width: 200px;
}
			
#mainBody {
	background-color: #EEEEE6;
}
			
#infoBar {
	background-color: #e4e5dd;
	width: 200px;
}

#footer {
	background-color: #323540;
	height: 50px;
}

/* #headerBar login buttons */

#headerBar ul.login-ul {
	margin: 0;
	margin-right: 12px;
	float: right;
	padding: 0;
	
}

#headerBar ul.login-ul li {
	list-style-type: none;
	float: left;
	margin-left: 12px;
	margin-top: 5px;
}

#headerBar ul.login-ul li a {
	color: #EEEEE6;
}


/* <!-- END #headerBar login buttons --> */

#header #logo {
	background-color: red;
	width: 85px;
	height: 85px;
	position: absolute;
	top: 50%;
	left: 12px;
	margin-top: -43px;
}

/* Caixa de busca */

#header #busca {
	background-color: white;
	width: 250px;
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -15px;
}

#header #busca input[type=text] {
	width: 250px;
	padding-top: 5px;
	padding-right: 35px;
	padding-left: 5px;
	padding-bottom: 5px;
	outline: none;
	border: 2px solid #e4e5dd;
	background-image: url('search-button3.png');
	background-repeat: no-repeat;
	background-position:...