JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <ul class="breadcrumb">
    <li>crumb 1</li>
    <li>crumb 2</li>
    <li>crumb 3</li>
    <li>crumb 4</li>
    <li>crumb 5</li>
  </ul>
</div>

CSS

.container {
  display: inline-flex;      /* Make container as wide as content on larger screens */
  justify-content: flex-end;
  overflow: hidden;
  max-width: 50%;            /* not sure what limits your width but you need to set a max-width */
}

.breadcrumb {
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.breadcrumb>li {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb>li:after {
  content: '>';
  display: inline-block;
  margin: 0 0.5em;
}

.breadcrumb>li:last-child:after {
  content: '';
  display: none;
}