JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
 
  <div id="top">  
   <ul id="menu">menu</ul> 
  </div>
 
<div id="logo"> 
  <img src="logo" height="50px"/> <!-- como es el logo no debe ir como fondo -->
</div>
 
<div id="content">
    slider
</div>
<div id="contenido">
contenido
</div>
<footer>
  <section>pie de pagina </section>
</footer>
 
</div>

CSS

#wrapper{
background: #EEE; /* igual que contenido */
width:100%;
}
 
#top{
     color:white;
background: #333; /* igual que menu */

    margin:0 auto;
width:100%;
height:100px; /* o la necesaria para que contenga el menu */
}
 
#menu{
    border:1px solid white;
background: #333;
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:300px; /*aunque se recomienda 960px */
    height:80px;
}
 
#logo{
background: #fff ;
width:100%;
    text-align:center;
}
#logo img{
     border:1px solid black;
margin:0 auto; /* lo importante es el auto de los margenes laterales */
width:300px; 
}
 
#content{ /*que está en el css del slider */
    border:1px solid black;
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:300px; 
    height:200px;
}
 
#contenido{
    border:1px solid black;
background:#eee; /*igual que wrapper */
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:300px; 
    height:350px;
}
 
footer{
    color:white;
background: #000;
width:100%;
    height:50px;
}
 
footer section {
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:100px; 
 
}