JSFiddle - React, Tailwind, and code Playground

by Ronen Cypis

HTML

<div class="wrapper">
    <div class="item" style="height: 300px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

CSS

.wrapper {
  height: 1400px;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}

.item {
  width:33%;
}