JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div class="container">
  <div class="center-area"><!--
 --><div class="centered">
      Yay, I'm centered in the blue area!
    </div>
  </div>
  <div class="content">
    <!-- Some content defining the
         height of the container -->
  </div>
</div>
<div id='container2'>
  <div id='left'>1</div>
  <div id='center'>2</div>
  <div id='right'>test test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test testtest test test</div>
  <span>ishank</span>
</div>

CSS

.container {
    min-height: 8em;
    position: relative; /* so center-area can
                           be positioned absolute */
    background-color:red;
    text-align:center;
  }
  .center-area {
    /* let it fill the whole container */
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color:yellow;
  }
  
  .centered {
    display: inline-block;
    vertical-align: middle;
    line-height:8em;
    
  }
  #container2{
    height:100vh;
   
  }
  #left, #center, #right{
    width:30%;
    height:calc(100vh-8em);
    display:inline-block;
     background-color:green;
     vertical-align: top;
  }
  
  span{
    background-color:red;
    line-height:200px;
    vertical-align: bottom;
  }