JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

the li's will expand to fill the width of the ul based on length of content:

<ul>
    <li>look at us go</li>
    <li>stretching across</li>
    <li>the ul</li>
    <li>yay bg color</li>
</ul>

CSS

ul {
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: orange;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: wheat;
}