JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
</ul>

CSS

ul {
    width: 550px;
    margin: 10px auto;
    list-style: none;
    overflow: hidden;
}
li {
    width: 100px;
    height: 100px;
    margin: 10px 10px 10px 0;
    float: left;
    background: rgb(0, 79, 140);
    text-align: center;
    font-size: 30px;
    line-height: 100px;
    color: white;
}

JavaScript

$('ul').children("li").each(function (i, child) {
    switch (i % 3){
        case 1: $(child).css({"margin": "120px 0 0 -110px"}); break;
        case 2: $(child).css({"margin": "230px 0 0 -110px"}); break;
        default:
    }
});