JSFiddle - React, Tailwind, and code Playground
HTML
<div class="example-button">Menu Button
<ul class="example-menu">
<li>Please</li>
<li>center</li>
<li>me!</li>
</ul>
</div>
CSS
body {
text-align: center;
}
.example-button {
position: relative;
padding: 15px;
border-radius: 5px;
background: red;
display: inline-block;
text-align: left;
}
.example-menu {
position: absolute;
display: inline-block;
top: 100%;
background: yellow;
margin:0;
padding: 10px 70px;
list-style: none;
left: 50%;
transform: translateX(-50%);
}