JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<ul class="topnav">
  <li><a class="active" href="#home">Inicio</a></li>
  <li><a href="#news">Novidades</a></li>
  <li class="right"><a href="#about">Sobre</a></li>
</ul>

<div class="a-right">
	<p>Podemos acreditar que tudo que a vida nos oferecerá no futuro é repetir o que fizemos ontem e hoje. Mas, se prestarmos atenção, vamos nos dar conta de que nenhum dia é igual a outro. Cada manhã traz uma benção escondida; uma benção que só serve para esse dia e que não se pode guardar nem desaproveitar.</p>
	
	<p>Se não usamos este milagre hoje, ele vai se perder.</p>

	<p>Este milagre está nos detalhes do cotidiano; é preciso viver cada minuto porque ali encontramos a saída de nossas confusões, a alegria de nossos bons momentos, a pista correta para a decisão que tomaremos.</p>

	<p>Nunca podemos deixar que cada dia pareça igual ao anterior porque todos os dias são diferentes, porque estamos em constante processo de mudança.</p>
	
</div>

<div class="a-center">
	<p>Não acredite em algo simplesmente porque ouviu. Não acredite em algo simplesmente porque todos falam a respeito.</p> 
	
	<p>Não acredite em algo simplesmente porque está escrito em seus livros religiosos. Não acredite em algo só porque seus professores e mestres dizem que é verdade.</p>

	<p>Não acredite em tradições só porque foram passadas de geração em geração. Mas depois de muita análise e observação, se você vê que algo concorda com a razão, e que conduz ao bem e beneficio de todos, aceite-o e viva-o.</p>
	
	<p>Não acredite em algo simplesmente porque ouviu. Não acredite em algo simplesmente porque todos falam a respeito.</p> 
	
	<p>Não acredite em algo simplesmente porque está escrito em seus livros religiosos. Não acredite em algo só porque seus professores e mestres dizem que é verdade.</p>

	<p>Não acredite em tradições só porque foram passadas de geração em geração. Mas depois de muita análise e observação, se você vê que algo concorda com a razão, e que conduz ao bem e beneficio de todos,...

CSS

@media only screen and (max-width: 500px) {
    body {
     
    }
	
}

body{
	padding: 0;
	margin: 0;
	font-family: 'Open Sans',sans-serif;
}


/* CONFIGURAÇÃO MENU */
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 1.5% 0 0 0;
    padding: 0;
    overflow: hidden;
    background-color: #d10000;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font-weight: 600;
	font-size: 16pt;
}

ul.topnav li a:hover:not(.active) {background-color: #3d3d3d; border: 1px solid white;}

ul.topnav li a.active {background-color: #3d3d3d; border: 1px solid white;}

ul.topnav li.right {float: right; border: 1px solid white;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
	body{
		float: none;
	}
}



/* CONFIGURAÇÃO CONTEUDO DIREITA */
.a-right {
	padding: 2%;
	float: right;
	width: 30%;
	
}

.a-center {
	
	padding: 2%;
	width: 60%;
}