JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="header-bg"></div>

    <ul class="menu">
        <li class="item">Carrot</li>
        <li class="item">Potato</li>
        <li class="item">Apple</li>
    </ul>
</div>

CSS

.header {
    margin: 20px;
    position: relative;
}

.header-bg {
    height: 100px;
    background: #123456;
}

.menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.menu .item {
    display: inline-block;
    padding: 15px 10px;
    
    color: #fff;
}