JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <!--Images -->
    <div class="main_1">
      <img src="https://cdn.shopify.com/s/files/1/1565/8463/products/P-025_1024x1024.png?v=1480092113">
    </div>
    <div class="main_2">
      <img src="https://images.contentful.com/v3n26e09qg2r/5AIMm6UcI8cYIWMsU8AqEq/d88942bfb655b82e1e2edfbd1ea5dcb8/About-02-1008x1008.svg">
    </div>
    <div class="main_3">
      <img src="https://images.contentful.com/v3n26e09qg2r/3oHSWtICys2aeEIusKyKkA/f2536bd931e2f23e0542dabaca204e7e/ABOUT-03-1008x1008.svg">
    </div>
    <div class="main_4">
      <img src="https://images.contentful.com/v3n26e09qg2r/2E1T4ripS8YSiGME8CyqAQ/00a036846325dd4983f95dcece9d4b9a/About-01-1008x1008.svg">
    </div>
    <div class="main_5">
      <img src="https://www.headspace.com/images/home/orange-breathing-character-dd9acb0bd7c7008a5e56799cd380fcc7.gif">
    </div>
    <div class="main_6">
      <img src="https://cf.bodyandmind.amsterdam/wp-content/uploads/2016/04/Headspace-FB1.jpg">
    </div>
  </div>

</body>

CSS

/*********************************
 CONTAINERS AND GRIDS
*********************************/


/*Note: column, float, clear, and vertical-align have no effect on a grid container.*/

.container {
  display: grid;
  padding: 60pt;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
  /* there are five values for five columns, each column gets a relative 
           width in relation to the grid*/
  grid-template-rows: 10% 45% 35% 10%;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  /*this means there are three rows*/
}

.container div img {
  border: 2px;
  width: 100%;
  height: 100%;
}

.main_1 {
  grid-area: main_1;
  grid-column: 2/5;
  grid-row: 2/3;
}

.main_2 {
  grid-area: main_2;
  grid-column: 5/8;
  grid-row: 2/3;
}

.main_3 {
  grid-area: main_3;
  grid-column: 8/11;
  grid-row: 2/3;
}

.main_4 {
  grid-area: main_1;
  grid-column: 2/4;
  grid-row: 3/4;
}

.main_5 {
  grid-area: main_2;
  grid-column: 4/7;
  grid-row: 3/4;
}

.main_6 {
  grid-area: main_3;
  grid-column: 7/11;
  grid-row: 3/4;
}

.footer {
  grid-area: footer;
  grid-row: 4/5;
  grid-column: 1/6;
}