JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
       <div class="insideWrap">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
          <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <img src="http://dummyimage.com/100x100/000/fff" class="img-responsive">
           <div class="fake"></div>
           <div class="fake"></div>
           <div class="fake"></div>
           <div class="fake"></div>
           <div class="fake"></div>
           <div class="fake"></div>
       </div>
   </div>

SCSS

html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
}   
.wrapper {        
        margin: 50px auto;
        width: 80%;
        background-color: red;
} 
.insideWrap {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        .img-responsive {
              max-height: 100%;
              width: auto;
              margin: 1em;
        }  
        .fake {
              width:100px;
              height:0;
              margin: 1em;
        }
}