JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-navigation">
    <ul class="main-menu">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
</ul>

CSS

ul { margin: 0; padding: 0; }
ul { display: flex; }
ul li {
  list-style-type: none;
  flex-basis: auto;
  flex-grow: 1;
  padding: 20px;
  background: #cf970c;
  text-align: center;
}
ul li a { display: block; text-decoration: none; }