JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="order-by-cols">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
    <li>item12</li>
    <li>item13</li>
    <li>item14</li>
</ul>

CSS

ul {overflow:hidden; background-color: #ddd; margin:2em 0; padding: 5px 0;}
li {float:left; width:30%; background-color:#eee; margin: 5px 1%; padding:0; list-style: none}

.order-by-cols {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    padding: 0;
} 
.order-by-cols li {
    padding: 0;
    margin: 10px auto;
    float:none; 
    width:90%; 
}

JavaScript

/* reordering columns */