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;
    }
    
    li {
        float: left;
        width: calc(600px / 6); /* yes, it gives 100px */
        height: 100px;
    }
    li:nth-child(2n) {
        background: rgba(0,0,0,0.25);
    }