JSFiddle - React, Tailwind, and code Playground

by wictor

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;}
/* CONFIGURAÇÃO CONTEUDO DIREITA */
.a-right {
    padding: 2%;
    float: right;
    width: 30%;
}
.a-center {
    padding: 2%;
    width: 60%;
}
@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
    .a-right {float: none; width: 100%}
    .a-center {width: 100%}
    body{
        float: none;
    }
}