JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<div class="navbar">
    <ul class="block">
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>
</div>

CSS

.navbar {
    text-align: center;
}

.block {
    display: inline-block;
    
    position: relative;
    margin: 40px auto;
    padding: 0;
    
    list-style: none;
}

.block:before {
    content: '';
    
    position: absolute;
    top: 0;       left: -9999px;
    bottom: 0;    right: 0;
    
    background: #000;
}

.block li {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    
    line-height: 40px;
    color: #fff;
}