JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="_unstyled_ _left_">
    <li>
        <a href="#" class="-avatar _round_ _normal">
            <figure class="-thumbnail">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/krystalfister/128.jpg" alt="Krystalfister">
            </figure>
        </a>
        <p class="name">Random Guy</p>
        <p class="points">9 876 / 10 000 points</p>
    </li>
    <li>i hate</li>
    <li>goddamn</li>
    <li>markup</li>
    <li>go die</li>
</ul>

CSS

ul {
    text-align: left;
    width: 100px;
}

li {
    background-color: #ff00ff;
    display: inline-block;
    width: 100px;
    padding: 0 10%;
    line-height: 5px;
}

li:nth-child(2n+1) {
    background-color: #ffff00;
}