JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<ul>
    <li>Data first</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data last</li>
</ul>

CSS

html,body{margin:0;padding:0;}
ul{
    background: gainsboro;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
    position: relative;
    align-content: flex-start;
}
li{
    display: block;
    width: 25%;
    padding: 15px;
    box-sizing: border-box;
    background: gray;
}