JSFiddle - React, Tailwind, and code Playground

HTML

<ul id='menu'>
    <li class="button"><a class='current' href='http://'>Home</a></li>
    <li class="button"><a href='http://'>Products</a></li>
    <li class="button"><a href='http://'>Support</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
</ul>

CSS

ul {
  padding: 0;
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}