JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div id="content1" class="row">
      <div class="subcontent">
          <div class="subContentContainer">
            content1
          </div>
      </div>
    </div>
    <div id="content2" class="row">
      <div class="subcontent">
        <div class="subContentContainer">
          content2
        </div>
      </div>
    </div>    
</body>

CSS

html,body{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
body{
    display:table;
}

.row{
    display:table-row;
    width:100%;
}

#top{
    height:100px;
}
#content1{
    background:#aa5555;
    padding:10px;
}

#content2{
    background:#5555AA;
    height:100%;
}

.subcontent{
  padding : 10px;
  height:100%;
}

.subContentContainer{
  background-color:yellow;
  height:100%;
}