JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<main>
		<header>
			<figure>
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-HTML5_logo_and_wordmark.svg.png" alt="logo">
			</figure>
			<nav>
				<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser.</p>
				<ul>
					<li><a href="">Menu 1</a></li>
					<li><a href="">Menu 2</a></li>
					<li><a href="">Menu 3</a></li>
					<li><a href="">Menu 4</a></li>
				</ul>
			</nav>
		</header>

		<section>
			<nav>
				<ul>
					<li>Link 1</li>
					<li>Link 2</li>
					<li>Link 3</li>
					<li>Link 4</li>
					<li>Link 5</li>
				</ul>
			</nav>
			<article>
				<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
			</article>
		</section>

		<footer>


		</footer>
	</main>
</body>

CSS

/*****************************************************************/
/*************************** Body ********************************/
/*****************************************************************/

body {
	/* Tipografia */
	font-family: Arial, Verdana, Geneva, sans-serif;
	font-size: medium;
	line-height: 180%;
	/* Fundo */
	background: blanchedAlmond;
}

/*****************************************************************/
/****************************** Main *****************************/
/*****************************************************************/

main {
	/* Centrar os conteudos */
	margin: 30px auto;
	width: 900px;
	border: 2px solid red;
	border-radius: 15px;
	padding: 10px;
}

/*****************************************************************/
/***************************** Header ****************************/
/*****************************************************************/

header {	
	/* width: 100%; */
	background: white;
	border: 2px solid blue;
	border-radius: 15px;
	width: 100%;
	height: 250px;
	margin: auto;
	/* position: relative; */
}

header figure {	
	width: 30%;
	margin: auto 5px auto 5px;
	float: left;
	/* position: relative; */
}

header figure img {
	margin-left: 35px;
}

header nav {	
	width: 65%;
	margin: auto 5px auto 5px;
	float: right;
	/* position: relative; */
}

header nav p {
	text-align: center;
}

header nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;	
	margin-top: 100px;
}

header nav li {
	display: inline;	
	background: red;
}

header nav li a {
	text-align: center;
	padding: 0 15px;
}


/*****************************************************************/
/*************************** Section * ***************************/
/*****************************************************************/

section {
	/* position: relative; */
  background: white;
	border: 2px solid green;
	border-radius: 15px;
	width: 100%;	
}

section nav {
	float: left;
	width: 30%;
	/* position: relative; */
}

section article {
	float:...