JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-container">
    <a href="/" class="hero-image">Link 1 (all blue)</a>
    <div id="overlaying-container">
        <a href="/some-page" class="navigation-button">Link 2</a>
        <a href="/some-other-page" class="navigation-button">Link 3</a>
        <a href="/yet-another-page" class="navigation-button">Link 4</a>
    </div>
</nav>

CSS

#main-container {
    display: flex;
    flex-direction: column;
    height: 100px;
    position: relative;
    background-color: aqua;
}

.hero-image {
    height: 100%;
    width: 100%;
}

#overlaying-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    display: flex;
}

.navigation-button {
    box-sizing: border-box;
    text-align: center;
    flex: 1;
    height: 50px;
    padding: 10px;
    margin: 5px;
    background-color: yellow;
    border: 1px solid #ccc;
}