JSFiddle - React, Tailwind, and code Playground

HTML

<header class=b-header>
        <ul class="b-menu">
            <li class="b-menu__item">Item 01</li><!--
            --><li class="b-menu__item">Item 02</li><!--
            --><li class="b-menu__item">Item 03</li><!--
            --><li class="b-menu__item">Item 04</li><!--
            --><li class="b-menu__item">Item 05</li><!--
            --><li class="b-menu__item">Item 06</li><!--
            --><li class="b-menu__item">Item 07</li>
        </ul>
</header>

CSS

.b-header {
    text-align: center;
}

.b-menu {
    border: 1px solid black;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 1em;
}

.b-menu__item {
    border: 1px solid red;
    padding: 0.5em;
    display: inline-block;
}