JSFiddle - React, Tailwind, and code Playground

by davmex

HTML

<nav>
  <div class="container">
    <table>
        <tr>
          <td><a href="">Link 1</a></td>
          <td><a href="">Link 2</a></td>
          <td><a href="">Link 3</a></td>
          <td><a href="">Link 4</a></td>
          <td><a href="">Link 5</a></td>
          <td><a href="">Link 6</a></td>
          <td><a href="">Link 7</a></td>
          <td><a href="">Link 8</a></td>
          <td><a href="">Link 9</a></td>
        </tr>
      </table>
  </div>
</nav>

SCSS

*,*:before, *:after {
  box-sizing: border-box;
}

.container {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 0px 20px;
  max-width: 1100px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

nav {
  background:  #ddd;
  border: 1px solid #666;
  border-left: 0px;
  border-right: 0px;
  margin-bottom: 9px;
   table {
     width: 100%;
     tr {
       td {
         text-align: center;
         a {
           padding: 15px;
           display: inline-block;
           width: 100%;
           height: 100%;
         }
       }
     }
   }
 }