JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main-nav">
    <li>Top Page 1</li>
    <li>Top Page 2</li>
    <li>Top Page 3</li>
    <li>Top Page 4</li>
</ul>

<h2>Top Page 1</h2>
<ul>
    <li>Menu Item
        <ul>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
        </ul>
    </li>
    <li>Menu Item</li>
    <li>Menu Item
       <ul>
            <li>Sub Item</li>
            <li>Sub Item</li>
            <li>Sub Item</li>
        </ul></li>
    <li>Menu Item</li>
</ul>

CSS

ul#main-nav {text-align:center;margin:0;padding:0;list-style:none;}
ul#main-nav li {display:inline-block; padding:5px 15px; border:1px solid green;}