JSFiddle - React, Tailwind, and code Playground

HTML

<div id="group-1" class="group-container">
  <div class="group-header">Group 1</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 1A</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1B</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1C</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1D</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1E</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 1F</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

<div id="group-2" class="group-container">
  <div class="group-header">Group 2</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 2A</div>
      <iframe class="tile-body"></iframe>
    </div>
    <div class="tile">
      <div class="tile-header">Tile 2B</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

<div id="group-3" class="group-container">
  <div class="group-header">Group 3</div>
  <div class="group-body">
    <div class="tile">
      <div class="tile-header">Tile 3A</div>
      <iframe class="tile-body"></iframe>
    </div>
  </div>
</div>

CSS

body {
  width: 1920px;
  height: 1080px;
  background-color: rgb(48, 48, 48);
  margin: 0;
  padding: 0;
  
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

/* Overall Styles */
.group-container {
  display: flex;
  flex-direction: column;
}

.group-header {
  height: 40px;
  background-color: rgb(21, 101, 192);
}

.group-body {
  flex-grow: 1;

  display: flex;
}

.tile {
  display: flex;
  flex-direction: column;
}

.tile-header {
  background-color: rgb(25, 118, 210);
}

.tile-body {
  flex-grow: 1;
}

/* Group 1 */
#group-1 {
  width: 50%;
  order: 1;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}

#group-1 .group-body {
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

#group-1 .tile {
  width: calc(100% / 3);
  height: 300px; /* Placeholder: Actual value needs to be equal to width */
}

/* Group 2 */
#group-2 {
  width: 50%;
  order: 2;
  flex-grow: 1;
  border-right: 3px solid black;
  border-top: 3px solid black;
}

#group-2 .group-body {
  flex-direction: column;
  align-items: flex-start;
}

#group-2 .tile {
  flex-grow: 1;
  width: 100%;
  height: 100%;
}

/* Group 3 */
#group-3 {
  width: 50%;
  height: 100%;
  order: 3;
  border-left: 3px solid black;
}

#group-3 .group-body {
  flex-direction: column;
}

#group-3 .tile {
  flex-grow: 1;
  
  width: 100%;
  height: 100%;
}