JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tudo">
    <header>
        <section id="logo">
           
        </section>
        <section id="menu">
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Sobre</li>
                    <li>Serviços</li>
                    <li>CAPFR</li>
                    <li>Parceiros</li>
                    <li>Planos</li>
                    <li>Contato</li>
                </ul>
            </nav>
        </section>    
    </header>
    <article>
        <div id="box">
       <section class="box_item">
        <p class="textos">
            <h3>Psicoterapia</h3>
   <span class="subtitle">O que é?</span><br />
  A psicoterapia (do grego psykhē - mente, e therapeuein - curar;) é um tipo de terapia, cuja finalidade é tratar os problemas psicológicos, tais como depressão, ansiedade, dificuldades de relacionamento, entre outros problemas de saúde mental.<br /><br />
  Por ser uma da área da saúde mental, a psicoterapia é a principal linha de tratamento para qualquer assunto referente ao psiquismo. Para isso, propõem intervenções psicológicas, cujos objetivos centrais são:<br /><br />
<ul>
<li>restabelecer o funcionamento psíquico ótimo do paciente;</li>
<li>permitir que o paciente compreenda as causas do que lhe acomete, para que possa encontrar recursos psíquicos para lidar com suas dificuldades, problemas, etc;</li>
<li>desenvolver meios de agir no mundo, redefinindo seus traços de personalidade.</li>
<li>solucionar problemas pontuais, que o afligem, bem como, observar questões de cunho mais existencial.</li>
  
            </ul> 
           
        </p>
        </section>
        
        <section class="box_item">
         <p class="textos">
             <h3>Me formei em psicologia</h3>
   <span class="subtitle">E agora?</span><br />
            Se você optou por seguir a carreira de psicologia clíncia, conte conosco <br /><br />
Foi para isso que nós tivemos a ideia de produzir o CAPFR - Centro de Apoio ao...

CSS

*{margin: 0; padding: 0;}
html, body{
    width: 100%;
    height: 100%;
    background: #fff;
}
#tudo{
    margin: 0 auto;
    width: 960px;
    height: 100%;
    background: #fff;
}

#tudo header{
    display: table;
    width: 100%;
    height: 100px;
    
}

#logo{
    margin-top: 15px;
    float: left;
    width: 200px;
    height: 68px;
    text-align: center;
    line-height: 68px;
    background: url(http://www.pokk.com.br/images/pokkclinica.jpg);
    
}

#menu{
     float: left;
    width: 760px;
    height: 100px;
   
}



#menu nav ul{
    list-style: none;
    margin: 20px;
}

#menu nav ul li{
    float: left;
    margin-left: 10px;
    width: 90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

#tudo article{
    width: 100%;
    height: auto;
    display: table;
}

.textos{
    padding: 10px;
    text-align: justify;
    
   
}

.box_item{
    width: 298px;
    float: left;
    margin-left: 5px;
    
}

#box{
    margin-left: 40px;
}


.titulo{
    color: #fff;
    font-family: verdana;
    font-weight: bold;
}

#tudo footer{
    color: #fff;
    width: 100%;
    height: 150px;
    background: #006;
}