JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="container">
      <div id="main-elem">
        <div class="flex-third">
          Porco Rosso
        </div>
        <div class="flex-third">
          Castle in the sky
        </div>
        <div class="flex-third">
          Ponyo
        </div>
      </div>
      <div id="bottom-elem">
        <div id="first">
          Metropolis
        </div>
        <div id="second">
          Paprika
        </div>
        <div id="third">
          Summer Wars
        </div>
      </div>
    </div>
  </body>
</html>

CSS

*{
  border: 1px solid blue;
  margin: 0;
}
/*OUTER GRID*/
#container{
  display:grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 50% auto;
  height: 100vh;
  width: 100%;
}
#main-elem{
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  display:flex;
  text-align: center;
  background-color: lightsalmon;
}
#bottom-elem{
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  
  display: flex; /* PROBABLY THIS HAS TO CHANGE*/
  
  text-align: center;
  background-color: lightblue; /* WHY NO COLOR IS SHOW?*/
}
/* GRID SECOND ROW */
#first{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
#second{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#third{
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

/* FELXBOX FIRST ROW*/
.flex-third{
  width: 33%;
}