JSFiddle - React, Tailwind, and code Playground

HTML

<main>
      <section class="posts">
    
          <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">

          <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">
        

        
          <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">
        

        
          <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">
        

        
          <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">
        

        
          <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">
        
      </section>
    </main>

<!-- end snippet -->

CSS

body{
    	margin: 0 auto; padding: 0;
    }
    main{
    	min-height: 70vh;
    	padding: 0;
    }
    main > section.posts{
    	box-sizing: border-box;
    	margin: 0; padding: 0;
    	display: flex;
    	flex-flow: row wrap;
    }
    main > section.posts > img{
      outline: 1px solid red;
    	width: 22vw;
    	min-height: 100vh;
    	margin: 0; padding: 0;
    	flex-grow: 1;
    	overflow: hidden;
    	box-sizing: border-box;
    }
    main > section.posts  > img{  /* Our suspect */
      object-fit: cover;
    }