JSFiddle - React, Tailwind, and code Playground

HTML

<div class="conteiner">
	
		<header>
			<h1>Header</h1>
		
		<div id="logo">
					<h1>Logo</h1>
				</div>
				<div id="redes">
					<h1>Redes Sociais</h1>
				</div>
		</header>
		<section>
			<h1 id="titulo">Section</h1>
			<article class="cor1"><h1>Article</h1></article>
			<article class="cor2"><h1>Article</h1></article>
			<article class="cor3"><h1>Article</h1></article>
		</section>
		<aside><h1>Aside</h1>
			
					 <ul>
					
						 <li><a href="#">Inicio</a></li>				
						 <li><a href="#">Trabajos</a></li>				
						 <li><a href="#">Proyectos</a></li>	
						 <li><a href="#">Servicios</a></li>	
						 <li><a href="#">Contacto</a></li>
				 	 </ul>
	
	
		</aside>
		<footer><h1>Footer</h1>
			<p>
					&copy; Copyright  by Pedro Miguel Ferreira Pereira
				</p>
		</footer>
		</div>

CSS

*{
		margin:0px;
		padding:0px;
	}

	body{

	}
	#logo {
	   margin-top:20px;
		float:left;
	}
	#redes {
	   margin-top:20px;
		float: right;
	}

	.conteiner{
	  width:80%;
	  background-color: purple;
	  margin: 0 auto;
	}

	header{
	  background-color: chocolate;
	  height: 160px;
	}

	ul{

		list-style:none;
	}



	a{
		 color:#fff;/*cor dos icones e textos dos icones*/
		 padding:0px 40px ;/*tamanho do quadro de cada item de  menu na barra lateral*/
		 text-decoration:none;
		 display:block;
		 font-size:30px;
		 text-align: center;
		 width: 80px;
	}

	a:hover{
		 background:black;
	}

	nav{
	  background-color:#bdaac1;
	  width: 90%;
	  margin:auto;
	}


	section{
	  background-color: pink;
	  float:right;
	  width:70%;
	  height: 400px;
	}

	article{
	 background-color: red;
	 width: 90%;
	 margin: 0 auto;
	 height: 100px;
	}

	aside{
	 background-color: #f65b5b;
	 float:left;
	 width:30%;
	 height: 400px;
	}


	footer{
	  background: blue;
	  clear:both;
	  text-align:center;
	}
	.cor1{
	background: yellow;
	}
	.cor2{
	background: #5e5d85;
	}

	.cor3{
	background: red;
	}

	#aMaior{
	  height: 200px;
	}