JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
  <div class="col">
    <div class="col-margin">Nav Item</div>
  </div>
</div>

<div class="grid">
  <div class="col">
    Nav Item
  </div>
  <div class="col">
    Nav Item
  </div>
  <div class="col">
    Nav Item
  </div>
  <div class="col">
    Nav Item
  </div>
  <div class="col">
    Nav Item
  </div>
  <div class="col">
    Nav Item
  </div>
</div>

CSS

.grid {
    display: table;
    width: 100%
}
.grid .col {
    display: table-cell;
}
.grid .col .col-margin {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 0 0 5px;
 /*   background: #999*/
  background: #ccc
}
.grid .col:first-child .col-margin {
    margin-left: 0;
}