JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="posts">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
<li>col 4</li>
<li>col 5</li>
<li>col 6</li>
</ul>

CSS

#posts { /* Masonry container */
    column-count: 3;
    column-gap: 1em;
	-moz-column-count: 3;
    -moz-column-gap: 1em;
	-webkit-column-count: 3;
    -webkit-column-gap: 1em;
	-ms-column-gap: 1em;
}

#posts li { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}