JSFiddle - React, Tailwind, and code Playground

by emrahday

HTML

<div class="main">
 <div class="top">
 
 </div>
 <div  class="middle">
 
 </div>
 <div  class="bottom">
 
 
    <div class="b-outer">
      <div class="b-middle">
        <div class="b-inner">
            <div class="element1">
           
            </div>
            <div class="element2">
            
            </div>

        </div>
      </div>
    </div>
   
 </div>
</div>

CSS

.main{
  height: 500px;
  width: 400px;
  background-color: gray;
}

.top{
  height: 200px;
  width: 200px;
  background-color: yellow;
  margin: 0 auto; 
}

.middle{
  height: 100px;
  width: 200px;
  background-color: red;
  margin: 0 auto; 
}

.bottom{
  height: 200px;
  width: 200px;
  background-color: yellow;
  margin: 0 auto; 
  position:relative;
}

.b-outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.b-middle {
    display: table-cell;
    vertical-align: middle;
}

.b-inner {
    margin-left: auto;
    margin-right: auto; 
    width: 80px;
    height: 80px;
    position:relative;
}

.element1{
  width: 100%;
  height: 20px;
  background-color: orange;
  position:absolute;
  top:0px;
}

.element2{
  width: 100%;
  height: 20px;
  background-color: orange;
  position:absolute;
  bottom:0px;
}