JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
       	<header class="top box"><h1>Lorem Ipsum?</h1></header>
	<nav class="mainnav box">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">Sobre</a></li>
			<li><a href="">Contato</a></li>
		</ul>
	</nav>		
	<article class="wrapper">	
		<header class="title box">
			<h2>Definição</h2>
		</header>
		<div class="conteudo box">
		  <h3>O que é Lorem Ipsum?</h3>
			<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. </p>			
			<p>Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado.</p>
		</div>
		<aside class="complementar box">
			<h3>Porque nós o usamos?</h3>
			<p>A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
		</aside>
		</article>
		<footer class="rodape box"><p>Todos os direitos reservados</p></footer>
</section>

CSS

* {	
	box-sizing: border-box;
}		
body {
	background-color: #382232;
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
}
body, a {
	color: #ffffff;  	
}
.container {
	display: grid;
  background-color: #fff;
	width: 95%;
  padding: 10px 10px 0;
	margin: 0 auto;
	grid-template-columns: repeat(4, 1fr) ;
	grid-template-rows: 1fr auto 1fr ;
	grid-column-gap: 10px;
  grid-row-gap: 10px;
	justify-content: center;	
}
.wrapper {
	display: grid;	
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto ;
  grid-column: 2 / 5;
	grid-row: 2;
	grid-column-gap: 10px;
}
.top {
	grid-column: 1 / -1;
	grid-row: 1;
}
.mainnav {
	grid-column: 1;
	grid-row: 2;
}
.rodape {
  grid-column: 1 / -1;
	grid-row: 3;
}
.title {
	grid-column: 1 / 4;
	grid-row: 1;
  margin-bottom: 10px;
}
.conteudo {
	grid-column: 1 / 3;
	grid-row: 2;
}
.complementar {
	grid-column: 3;
	grid-row: 2;
}
.top, .mainnav, .rodape {
	background-color: #01d29e;
}
.title, .conteudo, .complementar {
	background-color:#267fed;
}
.box {
	padding: 2% 5%;
}
ul {
  padding: 0;
  list-style-type: none;
}
@media screen and (max-width: 585px){
  .container {
    grid-template-rows: 1fr auto auto 1fr ;
  }
	.mainnav {
	  grid-column: 1 / -1;
    grid-row: 2;
	}
  .wrapper {
	  grid-column: 1 / -1;
    grid-row: 3
	}
  .rodape {
	  grid-row: 4;
	}
}