JSFiddle - React, Tailwind, and code Playground

by pkeller3

HTML

<div class="outer">
  <div class="left">
    <div class="top">
      <div class="tInner">
        top stuff
      </div>

    </div>
    <div class="bot">
      <div class="bInner">
        bot stuff
      </div>
    </div>
  </div>
  <div class="right">
    <div class="tRight">
      top right
    </div>
   
    <div class="botRight">
      <div class="mRight">
        <div class="mrInner">
          mid right
        </div>
      </div>
      <div class="bRight">
        <div class="brInner">
          bot right
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 99%;
  width: 99%;
}

.outer {
  height: 99%;
  width: 99%;
  background: red;
  padding: 5px;
  margin: auto;
  position: relative;
}

.left {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 100px;
  background: yellow;
  color: white;
  margin-right: 5px;
}

.right {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 110px;
  right: 5px;
  background: aqua;
  padding: 5px;
  display: grid;
  grid-template-rows: 55px;
  grid-row-gap: 5px;
}

.top,
.bot,
.mRight,
.bRight {
  height: 50%;
  position: relative;
}

.tInner,
.bInner,
.brInner,
.mrInner {
  padding: 5px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.tInner {
  background-color: blue;
}

.bInner {
  background-color: purple;
}

.tRight {
  height: 50px;
  background: black;
  color: white;
  padding: 5px;
  /* margin-bottom: 5px; */
}

.botRight {
  position: relative;
  background: gray;
  margin-top: 5px;
}
.bRight,
.mRight{
  min-height: 50px;
}

.bRight{
  background:pink;
}

.mRight{
  margin-bottom:5px;
  background: orange;
}