JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="flex-wrap">
   <div class="flex">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div> 
</div>

CSS

.flex-wrap {
    display: flex;
    height: 500px;
    background: yellow;
}
.flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px;
    width: 100%;
    background-color: red;
}

.flex-item {
    height: 80px;
    background-color: blue;
}