JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="L123-read-shell-layout-gutter util-fillout">
  <div class="L123-P0123-placement-gutter">
    <div class="componentContainer component-xyz util-fillout"></div>
  </div>
</div>

<div class="L456-read-post-layout-gutter util-fillout">
  <div class="L456-P1234-placement-gutter">
    <div class="componentContainer component-wxy util-fillout"></div>
  </div>
</div>

<div class="L789-read-page-layout-gutter util-fillout">
  <div class="L789-P2345-parent util-fillout">
    <div class="L789-P2345-placement-gutter">
      <div class="componentContainer component-vwx util-fillout"></div>
    </div>
  </div>
  <div class="L789-P3456-parent util-fillout">
    <div class="L789-P3456-placement-gutter">
      <div class="componentContainer component-uvw util-fillout"></div>
    </div>
  </div>
  <div class="L789-P4567-placement-gutter">
    <div class="componentContainer component-tuv util-fillout"></div>
  </div>
  <div class="L789-P5678-placement-gutter">
    <div class="componentContainer component-stu util-fillout"></div>
  </div>
</div>

CSS

html {
  font-size: 13px;
  pointer-events: none;
}
.util-fillout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.placement {
  position: absolute;
}
.placement > * {
  pointer-events: auto;
  background: #f00;
}

.placementparent {

}
.layout-shell123-gutter {
  margin: 0;
}
.layout-post456-gutter,
.layout-page789-gutter {
  margin: .5rem;
}
.placement0123 {
  top: 0;
  bottom: 93%;
  left: 0;
  right: 0;
  margin: 0;
}
.placement1234 {
  top: 7%;
  bottom: 75%;
  left: 0;
  right: 0;
}
.placement2345parent {
  right: 300px;
  margin-right: 1rem; /* compensates for lack of margins on left & right of solid placement to right */
}
.placement2345 {
  top: 25%;
  bottom: 0;
  left: 0;
  right: 50%;
}
.placement3456parent {
  right: 300px;
  margin-right: 1rem; /* compensates for lack of margins on left & right of solid placement to right */
}
.placement3456 {
  top: 25%;
  bottom: 0;
  left: 50%;
  right: 0;
}
.placement4567 {
  top: 25%;
  bottom: 250px;
  right: 0;
  width: 300px;
  margin-bottom: 1.5rem; /* compensates for lack of margins on top & bottom of solid placement below */
}
.placement5678 {
  width: 300px;
  bottom: 0;
  height: 250px;
  right: 0;
}