JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<div class="grid">
  <div class="left">
    Left
  </div>
  <div class="wrapper">
    <div class="center">
      Center
    </div>
    <div class="right">
      Right
    </div>
  </div>
</div>

CSS

.grid {
  display: grid;
  background: red;
  grid-template-areas: "left wrapper";
  grid-template-columns: 1fr 3fr;
  padding: 5px;
}

.wrapper {
  grid-area: wrapper;
  padding: 5px;
  background: salmon;
  display: grid;
  grid-template-areas: "center right";
  grid-template-columns: 2fr 1fr;
}

.left {
  grid-area: left;
  background: blue;
}

.center {
  grid-area: center;
  background: green;
}

.right {
  grid-area: right;
  background: yellow;
}