JSFiddle - React, Tailwind, and code Playground

HTML

<div id='nav'>

   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
  </ul>

</div>

<p>Other Content</p>

CSS

#nav{
    text-align: center;
    line-height:30px;
}
    
#nav li {
    list-style:none;
    margin: 0 5px;
    display:inline;
    border:gray solid 1px;
}