JSFiddle - React, Tailwind, and code Playground

by MueR

HTML

<div class="navbar">
    <ul class="lavalamp">
        <li class="lavalamp-item"><a class="select" href="/home">Home</a></li>
        <li class="lavalamp-item"><a href="/wat_doen_wij">Wat doen wij?</a></li>
        <li class="lavalamp-item"><a href="/wie_zijn_wij">Wie zijn wij?</a></li>
        <li class="lavalamp-item"><a href="/onze_visie">Onze visie</a></li>
        <li class="lavalamp-item"><a href="/producten">Producten</a></li>
        <li class="lavalamp-item"><a href="/portfolio">Portfolio</a></li>
    </ul>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
.navbar {
    background: black;
}
ul, li {
    margin: 0;
    padding: 0;
}
.lavalamp {
    display: table;
    min-width: 600px;
    max-width: 960px;
    margin: 0 auto;
}
.lavalamp-item {
    display: table-cell;
    padding: 0;
}
.lavalamp-item:nth-child(odd) {
    background-color: #333;
}
a {
    color: white;
    display: block;
    padding: 5px 10px;
    text-align: center;
}