JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="editor" class="row" style="margin:0px;height:100%;">
  <div id="layout1" class="" data-layout-id="1">
    <div class="droppable"></div>
    <div class="droppable"></div>
  </div>
</div>

CSS

body {
  margin: 0px;
  padding: 0px;
}

#editor {
  margin: 0px;
  height: 100%;
  position: absolute;
}

#editor #layout1 {
  height: 100% !important;
  padding: 5% !important;
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 0px auto;
  left: 0px;
  right: 0px;
}

#editor #layout1,
#editor #layout2,
#editor #layout3,
#editor #layout4 {
  top: 0px;
  border: 1px dashed #000;
  position: absolute;
}

#editor #layout1 .droppable {
  width: calc(90%);
  height: 43%;
  text-align: center;
  margin: 5%;
}

.droppable {
  border: 1px solid;
}

#layout1 .droppable:last-child {
  top: 4%;
  position: relative;
}