JSFiddle - React, Tailwind, and code Playground

HTML

<div id="agrupar">

<header id="cabecera">
<h1>Titulo principal de la web</h1>
</header>

<nav id="menu">
<ul>
	<li>Inicio</li>
	<li>fotos</li>
	<li>contacto</li>
</ul>
</nav>

<section id="seccion">
	<article>
		<header>
			<hgroup>
				<h1>Titulo del articulo</h1>
				<h2>Subtitulo del articulo</h2>
			</hgroup>
			<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
		</header>
		Texto del primer articulo
		<figure>
			<img src="">
			<figcaption>
				Imagen primer articulo
			</figcaption>
		</figure>
		<footer>
		<p>Comentarios</p>
		</footer>
	</article>
		<header>
			<hgroup>
				<h1>Titulo del articulo</h1>
				<h2>Subtitulo del articulo</h2>
			</hgroup>
			<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
		</header>
		Texto del segundo articulo
		<figure>
			<img src="">
			<figcaption>
				Imagen segundo articulo
			</figcaption>
		</figure>
		<footer>
		<p>Comentarios</p>
		</footer>
	<article>
		<header>
</section>

<aside id="columna">
<blockquote>Mensaje numero uno</blockquote>
<blockquote>Mensaje numero dos</blockquote>
</aside>

<footer id="pie">
Esto es el pie de pagina
</footer >

</div>

CSS

header,section,footer,aside,nav,article,figure,figcaption,hgroup{
    display: block; /* Hacemos que todas nuestras secciones se traten como bloques*/
}
 
#agrupar {
    width: 90%; /*Ancho del contenedor*/
    margin:15px auto;/*auto=margen superior e inferior */
    text-align: left;
}
h1{
    font: bold 20px verdama, san-serif;
}
h2{
    font: bold 14px verdana, sans-serif;
}
 
/* ESTILO DE LA CABECERA */
#cabecera {
    background: #FFFBB9;
    border: 1px solid #999999;
    
}
 
/* ESTILO DEL NAVEGADOR */
#menu {
    padding: 5px 15px;
}
 
#menu li{
    display: inline-block; /* Hace que coloquemos los elementos de la lista en linea*/
    list-style: none;
    padding: 5px;
    border: 1px solid #999999;
    font: bold 14px verdana, sans-serif;
    
}
 
/* ESTILO DE LA SECCION DE ARTICULOS */
#seccion {
    width:70%;
    margin: 10px 0;
    float: left;
    
}
 
/*ESTILO DEL ASIDE*/
#columna{
    width: 20%;
    margin: 10px 0px;
    float: right;
    padding: 20px;
    background: #CCCCCC;
}
 
 
 
/*ESTILO DEL PIE DE PAGINA*/
#pie{
    clear: both;
    background: #CCCCCC;
    text-align: center;
    padding: 20px;
    border-top: 2px solid #999999;
}
 
 
/* ESTILO DE LOS ARTICULOS */
article{
    background: #FFFBC;
    border: 1px solid #999999;
    padding: 20px;
    margin-bottom: 15px;
}
 
article footer{
    text-align:right;
}
time{
    color:#999999;
}
figcaption{
    font: italic 14px verdana, sans-serif;
}