JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-grid">
    <a class="image-grid--item" href="#">
        <img src="http://placehold.it/300x600" alt="">
    </a>
    <a class="image-grid--item" href="#">
        <img src="http://placehold.it/300x600" alt="">
    </a>
    <a class="image-grid--item" href="#">
        <img src="http://placehold.it/600x300" alt="">
    </a>
    <a class="image-grid--item" href="#">
        <img src="http://placehold.it/300x300" alt="">
    </a>
    <a class="image-grid--item" href="#">
        <img src="http://placehold.it/300x300" alt="">
    </a>
</div>

CSS

.image-grid {
    max-width: 800px;    
    margin: auto;
}

img {
    display: block;    
    max-width: 100%;
}

.image-grid--item {
    width: 25%;
    
    float: left;
    
    outline: 1px solid #fff;
}

.image-grid--item:nth-child(2) {
    float: right;
}

.image-grid--item:nth-child(3) {
    width: 50%;
}

/**/

@media (max-width: 600px) {
    .image-grid--item {
        width: 50%;
    }

    .image-grid--item:nth-child(3) {
        width: 100%;
    }
}