JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item">
    <div class="pos-rel">
      Position relative
      <div class="pos-abs-box"></div>
    </div>
  </div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

CSS

.grid {
  margin: 3rem;
  display: grid;
  grid-template-areas: "upperleft upperright"
     "lowerleft lowerright";
  /*grid-template-columns: 1fr 1fr;
  grid-template-rows: 20rem 20rem;*/
}

.grid-item {
  outline: 2px dashed blue;
  height: 20rem;
}

.grid-item:nth-child(1) {
  background-color: yellow;
  grid-area: "upperleft"
}
.grid-item:nth-child(2) {
    background-color: red;
  grid-area: "upperright"
}
.grid-item:nth-child(3) {
  background-color: green;
  grid-area: "lowerleft"
}
.grid-item:nth-child(4) {
  background-color: gray;
  grid-area: "lowerright"
}


.pos-rel {
  position: relative;
}

.pos-abs-box {
  position: absolute;
  height: 30rem;
  width: 30rem;
  background-color: fuchsia;
  left: -10rem;
  
}