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

.main-navigation {
  width: 800px;
	margin: 0 auto;
	background: green;
}


li {
    position: relative;
    display: inline-block;
    margin: 0 4px 0 3px;
    padding: 25px 20px 15px 15px;
    overflow: hidden;
    background: #cf970c;
    vertical-align: top;
}