JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<ul id="main">
    <li class="article">1</li>
    <li class="article">2</li>
    <li class="article">3</li>
    <li class="article">4</li>
    <li class="article">5</li>
    <li class="article">6</li>
    <li class="article">7</li>
    <li class="article">8</li>
    <li class="article">9</li>
    <li class="article">10</li>
    <li class="article">11</li>
    <li class="article">12</li>
</ul>

CSS

#main,
.article{
    position: absolute;
}

JavaScript

var el = $('#main .article');
for(var i=0; i <= el.length; i++){
    var left = (i == 0) ? 0 : i * 40;
    $(el[i]).css({
        top: i * 40 + "px",
        left: left + "px"
    });
    i++;
    $(el[i]).css({
        top: i * 40 + "px",
        left: left + "px"
    });
    
}