JSFiddle - React, Tailwind, and code Playground

by Fredrik Ekelund

HTML

<div class="wrapper">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="purple"></div>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="brown"></div>
</div>

CSS

.wrapper {
    background: black;
    display: flex;
    flex-flow: column wrap;
    height: 450px;
    align-items: center;
}

.wrapper > div {
    height: 100px;
    margin: 5px;
    width: 100px;
}

.wrapper > :nth-child(3n+2) {
    border: 2px solid white;
    height: 300px;
}

.red {
    background: red;
}
.blue {
    background: blue;
}
.pink {
    background: pink;
}
.purple {
    background: purple;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}
.brown {
    background: brown;
}