JSFiddle - React, Tailwind, and code Playground

by Alesei Narkevitch

HTML

<section>
  <header>
    <div>1 header item 1</div>
    <div>2 header item 2</div>
    <div>3 header item 3</div>
  </header>
  <div class="grid">
    grid
  </div>
  <footer>footer</footer>
</section>

SCSS

section {
  background-color: grey;
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction:column;
  
  header {
    background-color: blue;
    display: flex;
    align-items: flex-start;
  }
  
  .grid {
    display: flex;
    flex: 1;
    background-color: orange;
  }
  
  footer {
    height: 30px;
    
    background-color: purple;
  }  
}