JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <div id="wrapper">
        <div id="one">
            <figure id="one">
                <img src="01.png" alt="01" />
            </figure>
        </div><!--
        --><div id="two">
            <figure id="02">
                <img src="02.png" alt="02" />
            </figure>
            <figure id="03"> <a href="03.html"><img src="03.png" alt="03"/></a>

            </figure>
        </div><!--
        --><div id="three">
            <figure id="04"> <a href="04.html"><img src="04.png" alt="04"/></a>

            </figure>
            <figure id="05"> <a href="05.html"><img src="05.png" alt="05"/></a>

            </figure>
        </div><!--
        --><div id="four">
            <figure id="06"> <a href="06.html"><img src="06.png" alt="06"/></a>

            </figure>
        </div>
    </div>
</main>

CSS

*, *:before, *:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

div#one figure, div#four figure {
    height:80%;
    height:80vh;
}

div#two figure, div#three figure {
    height:40%;
    height:40vh;
}

div#wrapper {
    font-size:0; /* remove gap between inline elements */
    margin:0 auto;
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
    white-space:nowrap;
    white-space-collapsing:trim-inner; /* remove gap between inline elements STILL IN DEVELOPMENT */
    width:90%;
}

div#wrapper div {
    border:1px;
    border-color:#000000;
    border-style:solid;
    display:inline-block;
    max-width:25%;
    vertical-align:middle;
}

div#wrapper div figure {
    border:1px;
    border-color:#0000ff;
    border-style:solid;
    max-height:100%;
    vertical-align:middle;
}

div#wrapper div figure img, div#wrapper div figure a img {
    border:1px;
    border-color:#ff0000;
    border-style:solid;
    left:50%;
    max-height:100%;
    max-width:100%;
    position:relative;
    top:50%;
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

/* fix start page in firefox */
@-moz-document url-prefix() {
    main {
        text-align:center;
    }
}

/* just for jsfiddle */
img {
    width:300px;
}