JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="col a"></div>
    <div class="col b"></div>
    <div class="col c"></div>
    <div class="col d"></div>
    <div class="col e"></div>
    <div class="col f"></div>
    <div class="col g"></div>
    <div class="col h"></div>
</div>

CSS

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.grid {
    display: block;
    width: 100%;
    height: 300px;
    font-size: 0rem;
}

.col {
    display: inline-block;
    width: 25%;
    vertical-align: top;
}

.col.a {
    height: 40px;
    background: red;
}

.col.b {
    height: 60px;
    background: green;
}

.col.c {
    height: 20px;
    background: blue;
}

.col.d {
    height: 80px;
    background: orange;
}

.col.e {
    height: 80px;
    background: purple;
}

.col.f {
    height: 30px;
    background: magenta;
}

.col.g {
    height: 50px;
    background: yellow;
}

.col.h {
    height: 80px;
    background: grey;
}