JSFiddle - React, Tailwind, and code Playground

HTML

<section id="portfolio">
    <div>
        	<h1>PORTFOLIO</h1>

        	<h3>A sampling of my previous work.</h3>

    </div>
    <div class="row">
        <figure>	<a href="#">
						<img src="http://placehold.it/1000x1000" />
					</a>

        </figure>
        <figure>
            <img src="http://placehold.it/1000x900" />
        </figure>
        <figure>
            <img src="http://placehold.it/1000x600" />
        </figure>
    </div>
    <div class="row">
        <figure>
            <img src="http://placehold.it/1000x750" />
        </figure>
        <figure>
            <img src="http://placehold.it/1000x750" />
        </figure>
        <figure>
            <img src="http://placehold.it/1000x750" />
        </figure>
    </div>
</section>

CSS

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Open Sans;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
figure {
    overflow: hidden;
    flex: 1 0 0px;
    position: relative;
    margin: 0;
    height:240px;
}
figure > img {
    width:100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
a > img {
    max-width: 100%;
    vertical-align: middle;
}