JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<div class="pane">
    <div class="tile">One</div>
    <div class="tile">Two</div>
    <div class="tile">Three</div>
    <div class="tile">Four</div>
    <div class="tile">Five</div>
    <div class="tile">Six</div>
    <div class="tile">Seven</div>
    <div class="tile">Eight</div>    
</div>

CSS

* {
    box-sizing: border-box;
}
.pane {
    display: flex;
    flex-flow: column wrap;
        
    height: 300px;
    border: 1px solid;
    padding: 15px;

}

.tile {
    position: relative;

    border: 1px solid red;
    height: calc(50% - 15px);
    
    padding: 10px;
}

.tile + .tile + .tile {
    margin-left: 30px;
}
.tile:nth-child(odd) {
    margin-bottom: 30px;
    border-color: green;
}

.tile:nth-child(4n - 1) {
    border-color: blue;
    height: calc(75% - 15px);

}

.tile:nth-child(4n) {
    height: calc(25% - 15px);
}

/* Arrows */
.tile:nth-child(odd)::after, .tile:nth-child(odd)::before {
    position: absolute;
	top: 100%;
	left: 50%;
    
    height: 0;
	width: 0;
    
	border: solid transparent;
	content: " ";
	
}

.tile:nth-child(odd)::after {
    border-width: 10px;
	margin-left: -10px;
	border-color: transparent;
	border-top-color: white;
}

.tile:nth-child(odd)::before {
    border-width: 11px;
	margin-left: -11px;
	border-color: transparent;
	border-top-color: inherit;
}