JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="container adjusted">
        <div class="container adjusted2">
            <img class="picture overlay1" src="http://imgs.steps.dragoart.com/how-to-draw-a-beagle-puppy-beagle-puppy-step-7_1_000000086491_5.jpg" />
            <img class="picture overlay2" src="http://imgs.steps.dragoart.com/how-to-draw-a-beagle-puppy-beagle-puppy-step-7_1_000000086491_5.jpg" />
            <img class="picture overlay3" src="http://imgs.steps.dragoart.com/how-to-draw-a-beagle-puppy-beagle-puppy-step-7_1_000000086491_5.jpg" />
            <img class="picture overlay4" src="http://imgs.steps.dragoart.com/how-to-draw-a-beagle-puppy-beagle-puppy-step-7_1_000000086491_5.jpg" />
            <img class="picture overlay5" src="http://imgs.steps.dragoart.com/how-to-draw-a-beagle-puppy-beagle-puppy-step-7_1_000000086491_5.jpg" />
        </div>
    </div>
</div>

CSS

.container {
    /* border: 1px red solid;  */
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.adjusted {
    position: absolute;
    top:50%;
}

.adjusted2 {
    position: relative;
    top:-100px;
}
.picture {
    width: 10%;
    position: absolute;
    display: inline;
}
.overlay1 {
    top: 50%;
    left:25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.overlay2 {
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.overlay3 {
    top: 50%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.overlay4 {
    top: 75%;
    left: 37.5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.overlay5 {
    top: 75%;
    left: 62.5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}