JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="col-1of2">
        <img src="//placehold.it/400x400/efefef/cccccc/&text=block" />
    </div>
    <div class="col-1of4">
        <img src="//placehold.it/200x200/e7e7e7/cccccc/&text=block" />
        <img class="the-odd-one" src="//placehold.it/200x400/e0e0e0/cccccc/&text=block"/>
    </div>
    <div class="col-1of4">
        <img src="//placehold.it/200x400/f3f3f3/cccccc/&text=block" />
    </div>
    <div class="col-full hoist">
        <div class="grid">
            <div class="col-1of4">
                <img src="//placehold.it/200x400/ececec/cccccc/&text=block" />
            </div>
            <div class="col-1of2">
                <div class="grid">
                    <div class="col-1of2">
                        <img src="//placehold.it/200x200/e7e7e7/cccccc/&text=block" />
                    </div>
                    <div class="col-full">
                        <img src="//placehold.it/400x200/f3f3f3/cccccc/&text=block" />
                    </div>
                </div>
            </div>
            <div class="col-1of4">
                <img src="//placehold.it/200x400/e7e7e7/cccccc/&text=block" />
            </div>
        </div>
    </div>
</div>

CSS

.grid {
    display: block;
    width: auto;
    background: #efefef;
    max-width: 800px;
    margin: 0 auto;
}
[class*="col-"] {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.col-1of2, .col-2of4 {
    width: 50%;
}
.col-1of3 {
    width: 33.333%;
}
.col-1of4 {
    width: 25%;
}
.col-2of3 {
    width: 66.666%;
}
.col-3of4 {
    width: 75%;
}
.col-full {
    width: 100%;
}
[class*="col-"] img {
    max-width: 100%;
    vertical-align: top;
}
.the-odd-one {
    position: relative;
    z-index: 1;
}
.hoist {
    margin-top: -25%;
}