JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="tabs">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
  <div>Item 11</div>
  <div>Item 12</div>
</div>

CSS

.tabs {
  background: #000;
  display: table;
  height: 30px;
  table-layout: fixed;
}
.tabs > div {
  background: #777;
  border: 1px solid red;
  color: #FFF;
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  white-space: nowrap;
  width: 100px;
}