JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item-list">
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

CSS

.column-1 {
    background: blue;
}
.column-2 {
    background:red;
}
.column-3 {
    background: green;
}
.column-4 {
    background: pink;
}

JavaScript

//total = $('div.item-list > ul').children().length;
total = $('div.item-list > ul').children().length + 1;
$('div.item-list > ul > li').each(function (index) {
    columns = 3;
    $(this).addClass("column-" + Math.ceil((index + 1) / (total / columns)));
});