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

body {
    background-color:#cccccc;
    font-family: monospace;
    font-size:120%;
    margin:0;
    padding:0;
}

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

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

figure {
    margin:0;
    padding:0;
}

div#wrapper {
    margin:0 auto;
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
    white-space:nowrap;
    width:80%;
}

div#wrapper div {
    display:inline-block;
    width:25%;
}

div#wrapper div figure img, div#wrapper div figure a img {
    height:100%;
    width:100%;
}