JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

CSS

ul  {
    display: inline-block;
    width: 600px;
    height: 600px;
    margin: 0;
    padding: 0;
    border: 2px solid #ccc;
    list-style: none;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1); /* IE10+, FF16+ и т.д. */
    filter: flipv; /* IE4 - 9 */
}

li {
    float: right;
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 10px;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1); /* IE10+, FF16+ и т.д. */
    filter: flipv; /* IE4 - 9 */
    background: #eee;
}

li:nth-child(3n) { background: #eee; }
li:nth-child(3n+1) { background: #fee; }
li:nth-child(3n+2) { background: #efe; }