JSFiddle - React, Tailwind, and code Playground

by shanemendez

HTML

<div id="app">
  <div class="flex">
    <div class="row" id="item1"></div>
    <div class="row" id="item2"></div>
    <div class="row" id="item3"></div>
  </div>
  <div id="top"></div>
</div>

CSS

html,body{
  margin:0;
  padding: 0;
  height: 100%;
}
div{
    width: 100%;
    height: 100%;
}
.flex{
  display: flex;
  flex-direction: column;
}

#item1{
  background: teal;
}
#item2{
  background: pink;
}
#item3{
  background:orange;
}

#app{
  position: relative;
}
#top{  
  position: absolute;
  top: 0;
  background: white;
  margin: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
}