JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

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: gray;
    display: inline-block;
    text-align: left;
}

.example-menu {
    position: absolute;
    display: inline-block;
    top: 100%;
    background: blue;
    margin:0;
    padding: 10px 70px;
    list-style: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}