JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
		<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="bootstrap/bootstrap.css"> 
	<link rel="stylesheet" href="bootstrap/bootstrap.min.js"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>

<body>
	
	<header>
		<div class="container-fluid">
		<div class="row">
			<div class="col-xs-3 col-md-3">
<button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
			</div>
			
			
			</div>
		</div>
	</header>
	<div class=teste></div>

	<aside>
<div id="lateral" onclick="return true" aria-haspopup="true">
<div id="menu">

<h3 class="link-titulo">Menu</h3>  			
    <ul class="box">					
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Receitas</a></li>
        <li ><a href="#">Fale Conosco</a></li>
      		
		<div class="col-sm-12">

                <h2 class="footer_titulo">NEWSLETTER</h2>
                <p class="conteudo_footer">Assine nossa mala direta e receba muitas ofertas por e-mail.</p>
                <input type="text" id="campo_busca2"><button type="submit" onclick="" class="buscar_produto3"><i class="fa fa-search" action="" ></i></button><br><br>
            </div>
		<img src="imagens/bolos.JPG" class="imagem_header">
    </ul>
   


</div> <!-- /#menu -->
</div> <!-- /#lateral -->
	</aside>
	
	<footer class="fixed-footer">
	Conteudo do footer que era pra ficar embaixo
	</footer>
	
</body>
</html>

CSS

/* 2a. Etapa */
@charset "UTF-8";
/* Folha de estilos:
Autor: Maurício Samy Silva
Versões
Data: 26/04/2014 - Redesign do site
*/
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: 'Fixation';
    src: url('css/Fixation.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        
       
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
#busca{
	width: 90%;
}

.footer_titulo{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.conteudo_footer{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.fale{
	margin-top: 40px;
	margin-left:40px;
	font-family: 'Fixation';
	font-weight: 700;
}
.entre{
	margin-top: 40px;
	margin-left: 160px;
	font-family: 'Fixation';
	font-weight: 700;
}
.imagem_header{
	width: 35%;
	
	
}
.campo_busca{
	margin-top: 40px;
	margin-left: 160px;
	border: 1px radius solid;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fim CSS Reset */
/* =GERAL */
*, html, body {
	margin:0;
	padding:0;
	}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing:...