JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="col box_red">
    some text
  </div>
  <div class="col box_blue">
    some text
  </div>
  <div class="col box_yellow">
    some text
  </div>
  <div class="col box_green">
    some text
  </div>
  <div class="col box_black">
    some text
  </div>
  <div class="col box_orange">
    some text
  </div>
</div>

SCSS

html, body {
  height: 100%;
}
.w100 {
  width: 100%!important;
  height: 0;
}
.container {
  max-width: 80%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  
  .col {
    flex: 0 0 33.3333%;
    height: 50vh;
    min-height: 1px;
    max-width: 33.3333%;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #FFF;
  }
  
  .box_red {
    background-color: red;
  }
  .box_blue {
    background-color: blue;
  }
  .box_yellow {
    background-color: yellow;
  }
  .box_green {
    background-color: green;
  }
  .box_black {
    background-color: black;
  }
  .box_orange {
    background-color: orange;
  }
}