JSFiddle - React, Tailwind, and code Playground

HTML

<header>Kopf oder Zahl</header>
<nav><ul>
<li><a data-value="aaa">AAA</a></li>
<li><a data-value="bbb">BBB</a></li>
</ul>
<ul>
<li><a data-value="yyy">YYY</a></li>
<li><a data-value="zzz">ZZZ</a></li>
</ul></nav>
<main>
<h2>Hauptsache</h2>
</main>
<footer>Siehe unten</footer>

CSS

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column;}

header { height: 50px; background-color: #fcc; }

nav {
  display: flex; justify-content: space-between;
  border-top: 1px solid black; background: linear-gradient(to bottom, #c4bfbc 0, #c4bfbc 30%, white 60%);
  padding: 0 1em;
  margin-bottom: 0.5em;
}

nav ul {
   display: flex;
   list-style-type: none;
   padding: 0;  margin: 0 1.6em; height: 1.6em;
   background-image: linear-gradient(to bottom, #baa 0, #baa 40%, #554 95%, transparent 100%);
   background-clip: content-box;
   position: relative;
}

nav ul::before, nav ul::after {
    content: " ";
    display: block; width: 1.6em; height: 1.6em;
    position: absolute; top: 0;
}

nav ul::before {
    left: -1.6em;
    background-image: radial-gradient(1.6em at 100% 0, #baa, #baa 40%, #554 95%, transparent 100%);
}

nav ul::after {
    right: -1.6em;
    background-image: radial-gradient(1.6em at 0 0, #baa, #baa 40%, #554 95%, transparent 100%);
}

nav a {
    display: block;
    box-sizing: border-box; height: 1.6em;
    padding: 0 2em; margin: 0;
    border: none; font: inherit; background:none;
}

main { flex: 1 0 auto; padding: 0 2em; background-color: #8c8; }