JSFiddle - React, Tailwind, and code Playground

HTML

<div id="columnas">
<article class="art">
<p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    
</article>
<article class="art" >
<p>ejemplo2</p>
    <p>ejemplo2</p>
</article>
<article class="art">
<p>ejemplo3</p><p>ejemplo3</p><p>ejemplo3</p>
</article>	
<article class="art">
<p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p>
</article>
<article class="art">
<p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p>
</article>	
<article class="art">
<p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    <p>ejemplo1</p>
    
</article>
<article class="art" >
<p>ejemplo2</p>
    <p>ejemplo2</p>
</article>
<article class="art">
<p>ejemplo3</p><p>ejemplo3</p><p>ejemplo3</p>
</article>	
<article class="art">
<p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p><p>ejemplo4</p>
</article>
<article class="art">
<p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p><p>ejemplo5</p>
</article>	
</div>

CSS

body{width:500px;}
#columnas {
   -webkit-column-count: 3;
   -webkit-column-gap: 15px;
   -webkit-column-fill: auto;
}

.art {
   background: #E9EBED;
   border: 2px solid #FFFFFF;
   box-shadow: 0 1px 3px rgba(20,20,20, 0.4);
   display: inline-block;
   margin: 0 5px 20px;
   padding: 10px;
    vertical-align:top;
}