JSFiddle - React, Tailwind, and code Playground

HTML

<section id="Imagebox">

<div class="aspect-box">

<div class="block-aspect">
<div class="aspect-spacer">&nbsp;</div>
<div class="tile"></div>
</div>


<div class="block-aspect">
<div class="aspect-spacer">&nbsp;</div>
<div class="tile">
<div class="tile2">XXX</div>
<div class="tile3">
<section id="outer-wrapper">

<section class="outer-box">
   <section id="inner-wrapper">

<figure class="image"><a href="" class="" data-sub-html=""><img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg"></a></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-1.jpg"></figure>
<figure class="image"><img  src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg"></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-4.jpg"></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-5.jpg"></figure>    
<figure class="image"><img  src="http://lorempixel.com/output/nature-q-c-200-200-6.jpg"></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-7.jpg"></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure>    
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img src="http://lorempixel.com/output/nature-q-c-200-200-8.jpg"></figure> 
<figure class="image"><img...

CSS

#Imagebox {
	border: 1px groove black;
	height: auto;
	width: auto;
	margin-left: 10%;
	margin-right: 10%;
	}

.aspect-box {width: auto; border: 0px solid red; padding: 1rem 1rem 0 0; margin: 0 auto; position: relative;}
.block-aspect {float:left; width:calc(100% / 2); position:relative;}
.aspect-spacer {content:""; display:block; padding-top:100%;}
.tile {position: absolute; top:0; right:0; bottom: 1rem;left: 1rem; border: 1px solid #ccc;}
.tile2 {position: absolute; top:2%; right:2%; bottom: 75%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}
.tile3 {position: absolute; top:27%; right:2%; bottom: 2%;left: 2%; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.5);}

#outer-wrapper {
    display: flex;
}
.outer-box {
    padding: 10px;
    border: 2px solid black;
    flex: 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.left-image {
    width: 100%;
    height: auto;
}


#inner-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.image {
    flex: 1 16%;
    margin: 2%;
}
.image img {
    border: 2px solid black;
    width: 100%;
    height: auto;
}