JSFiddle - React, Tailwind, and code Playground

by Cthulhu

HTML

<body>
  <nav>
    menu
  </nav>
	<main>
	
  <header>
    <h1>header</h1>
  </header>
  <article class="noticias">
    1
  </article>
  <article class="noticias">
    2
  </article>
  <article class="noticias">
    3
  </article >
	
	<article id="conteudo">
	
	</article>
	
	<footer>
	Footer
	</footer>


	</main>
</body>

CSS

nav {
  background-color: red;
  width: 200px;
  height: 450px;
}
main{
	width:auto;
	margin-left:220px;
}

header {
  background-color: yellow;
  width: auto;
  height: 100px;
  margin-top: -450px;
  text-align: center;
}

article{
	background-color: green;
  width: 24%;
  height: 125px;
  margin-left: 0;
	padding:5px;
	margin-top:10px;
	float:left;
  text-align: center;
	display:inline-block;
}

footer{
	text-align: center;
	width:auto;
	height:150px;
	background-color:blue;
	margin-top:300px;
}

.counteudo{
	width:400px;
}