JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div id="container">
  <div class="row" style="background-color:green">
  <div class="cell">
         sdfsdfsdf
       
    </div>
  </div>
    <div class="row" style="background-color:blue">
  <div class="cell">
         sdfsdfsdf
       
    </div>
  </div>
    <div class="row" style="background-color:pink">
  <div class="cell">
         sdfsdfsdf
       
    </div>
  </div>
      
    
</div>

CSS

body {
    padding: 0;
    margin: 0; 
}


#container {
    width: 100%;
    background: red;
    height:100%;
    display: table;
    position:absolute;
    
}
.QuoteRow {
    vertical-align: middle;
    display: table-row;
}
.QuoteRow:first-of-type,.QuoteRow:last-of-type{height:20%}
.cell {
    vertical-align: middle;
    display: table-cell;
}