JSFiddle - React, Tailwind, and code Playground

by Programina

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 { 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;
}