JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-links="6">
    <li><a href="settings/_users.php">Users</a>
    </li>
    <li><a href="settings/_flows.php">Flows</a>
    </li>
    <li><a href="settings/_file_syncing.php">File syncing</a>
    </li>
    <li><a href="settings/_profile.php">Profile</a>
    </li>
    <li><a href="settings/_billings.php">Billings</a>
    </li>
    <li><a href="settings/_notifications.php">Notifications</a>
    </li>
</ul>

CSS

ul {
    width: 600px;
    height: 100px;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #000;
    display: table;
    table-layout: fixed;
    /* this ensure equal width */
}
ul > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}
li:nth-child(2n) {
    background: rgba(0, 0, 0, 0.25);
}