JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!DOCTYPE html>
<html lang="es">
<!-- esto es un comentario en html -->
<head>
	<meta charset="utf-8" />
	<title>Mi primer p&aacute;gina dise&ntilde;ada en HTML5</title>
	<meta name="description" content="Aqui va la descripción de mi sitio" />
	<link rel="stylesheet" type="text/css" href="css/estilos.css" />
</head>
<body>
  <section class="contenedor">
	<header>
		<h1>Mi encabezado principal</h1>
		<figure>
			Logo
			<figcaption>Titulo logo</figcaption>
		</figure>
	</header>
	<nav>
		Men&uacute; de navegaci&oacute;n
	</nav>
	<section class="medio">
		<hgroup>
			<h1>Mi encabezado secundario</h1>
			<h2>Un sub encabezado de tipo h2</h2>
		</hgroup>
		<article>
				Esto es un art&iacute;culo de contenido
				<section>
					Otra secci&oacute;n dentro de un art&iacute;culo
				</section>
		</article>
	</section>
	<aside>
			Contenido secundario sin relevancia
	</aside>	
	<footer>
		Aprendiendo HTML5 con @jonmircha
	</footer>
  </section>
</body>
</html>

CSS

.contenedor{
  width:100vw;
  height: 100vh;
  display:grid;
  
  grid-template-columns: 1fr 300px;
  grid-template-rows; 1fr 100px 300px 1fr;
}
header{
  background-color:red;
   grid-column-start: 1; 
   grid-column-end: 3;
   grid-row-start: 1; 
   grid-row-end: 2;
}
nav{
  background-color:green;
   grid-column-start: 2; 
   grid-column-end: 3;
   grid-row-start: 2; 
   grid-row-end: 3;
}
aside{
  background-color:black;
  color:white;
   grid-column-start: 2; 
   grid-column-end: 3;
   grid-row-start: 3; 
   grid-row-end: 4;
}
footer{
  background-color:orange;
  grid-column-start: 1; 
   grid-column-end: 3;
   grid-row-start: 4; 
   grid-row-end: 5;
}
section{
  background-color:pink;
  grid-column-start: 1; 
   grid-column-end: 2;
   grid-row-start: 2; 
   grid-row-end: 4;
}

@media (max-width: 575px) { 
  section{
    background-color:blue;
    color:white;
  }

}