JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
  <li>
    <div>
      <span>Item 1</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 2</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 3</span>
    </div>
  </li>
</ul>

<ul class="tabs">
  <li>
    <div>
      <span>Item 1</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 2</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 3</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 4</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 5</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 6</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 7</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 8</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 9</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 10</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 11</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 12</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 13</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 14</span>
    </div>
  </li>
  <li>
    <div>
      <span>Item 15</span>
    </div>
  </li>
</ul>

CSS

.tabs {
  display: table;
  height: 30px;
  margin: 0;
  padding: 0;
  table-layout: fixed;
}
.tabs div {
  height: 100%;
  position: relative;
}
.tabs li {
  background: #777;
  border: 1px solid red;
  color: #FFF;
  display: table-cell;
  padding: 0 3px;
  white-space: nowrap;
  width: 100px;
}
.tabs span {
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  width: 100%;
}