JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="GridCont">
      <div class="PostContent">
        <div class="PicContent pic1">
          <div class="cTextP">Picture #1</div>
        </div>
        <div class="Content box1">
          <div class="cTextP">Content #1</div>
        </div>
        <div class="PicContent pic2">
          <div class="cTextP">Picture #2</div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.GridCont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
  "content content content content" 
  "content content content content" 
  "content content content content";
}

.PostContent {
  grid-area: content;
  background: #B8E986;
}

.Content {
  background: #000000;
  width: 35%;
  color: white;
  display: inline-block;
}

.box1 {
  height: 120vh;
}

.PicContent {
  background: blue;
  color: white;
  display: inline-block;
}

.pic1 {
  height: 60vh;
  width: 50%;
}

.pic2 {
  height: 60vh;
  width: 45%;
}

.cTextP {
  padding: 20px;
}