JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pane">
    <div class="tile category-foo">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-bar">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-baz">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-foo">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
</div>

<div class="pane">
    <div class="tile category-foo">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-baz">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-baz">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-foo">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
</div>


<div class="pane">
    <div class="tile category-foo">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile">
         <h2>Introducing mind control robots</h2>
 <a href="#">Feb 20 on foo bar baz</a>

    </div>
    <div class="tile category-baz">
         <h2>Introducing mind...

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font: 15px helvetica, sans-serif;
}
.pane {
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    
    height: 480px;
    border: 1px solid red;
}
.tile {
    position: relative;
    height: 110px;
    width: calc(25% - 24px);
    background-color: currentColor;
    color: #1661cd
}
.tile h2 {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: normal;
    padding: 20px 20px 0 20px;
}
.tile a {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 20px;
    background-color: hsla(0, 0%, 0%, .09);
    color: hsla(0, 0%, 100%, .8);
    text-decoration: none;
}
.tile:nth-child(n + 3) {
    margin-left: 32px;
}
.tile:nth-child(even) {
    margin-top: 24px;
    margin-bottom: 54px;
}
.tile:nth-child(4n + 2) {
    height: 148px;
}
.tile:nth-child(4n + 2) h2 {
    font-size: 22px;
}
.tile:nth-child(2n + 3) {
    height: 170px;
    max-width: 13.04%;
}
.tile:nth-child(4) {
    height: 346px;
    width: 32.44%;
    padding-top: 172px;
    background: url(https://collegecandy.files.wordpress.com/2013/03/seenedstark.gif) no-repeat top center, linear-gradient(to right, black, black) no-repeat top left, #2d715f;
    background-size: auto 172px, 100% 172px;
}
.tile:nth-child(4) h2 {
    font-size: 24px;
}
.tile:nth-child(3n) {
    margin-bottom: 78px;
}

.pane:nth-child(2) {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.pane:nth-child(2) .tile:nth-child(n + 4) {
    -webkit-order: -2;
    order: -2;
    
    margin-left: 0;
    margin-right: 32px;
}

.pane:nth-child(2) .tile:last-child {
    margin-bottom: 54px;
}

.pane:nth-child(2) .tile:nth-child(4) {
    -webkit-order: -1;    
    order: -1;
    
    margin-bottom: 78px;

}

.pane:nth-child(3) .tile:nth-child(4) {
    -webkit-order: -1;
    order:...