JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="centered">
    </div>
    <ul class="menu">
        <li>option1</li>
        <li>option2</li>
    </ul>
</div>

CSS

.wrapper { overflow: hidden; position: relative; }
.centered { width: 500px; height: 50px; margin: 0 auto; background: red; }
.menu { position: absolute; bottom: 0; width: 100%; left: 50%; background: #ccc; }
.menu li { display: block; float: left; padding: 3px 5px; background: #E9CFEC; border-right: 1px solid #333; }