JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<h2>FlexBox: Exemplo de Uso</h2>
<p>Neste exemplo, aplicamos o display flex, nos elementos "pai", tornando assim nossos elementos "filhos" flexíveis e permitindo sua manipulação com o Flex-Grow, que faz o elemento crescer de acordo com o valor desejado. Também foi utilizado justify-content
e align-items que permitem o posicionamento horizontal e vertical dos elementos.</p>

<div class="container">

  <header>Header</header>

  <section>
    <nav>Navbar</nav>
    <article>Main Content</article>
    <aside>Aside</aside>
  </section>

  <footer>Footer</footer>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300');
body {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
}

.container {
  display: flex;
  flex-direction: column;
  color: #fff;
}

h2,
p {
  text-align: center;
  margin: 30px 30px;
}

header,
footer {
  background-color: #011638;
  min-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  display: flex;
  min-height: calc(100vh - 100px);
}

nav {
  background-color: #9055A2;
  flex-grow: 1;
  /*Para Alinhamento Vertical e Horizontal*/
  display: flex;
  justify-content: center;
  align-items: center;
}

article {
  background-color: #2E294E;
  flex-grow: 6;
  /*Para Alinhamento Vertical e Horizontal*/
  display: flex;
  justify-content: center;
  align-items: center;
}

aside {
  background-color: #D499B9;
  flex-grow: 2;
  /*Para Alinhamento Vertical e Horizontal*/
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}