JSFiddle - React, Tailwind, and code Playground

by makingthings

HTML

<section class="breadcrumb">
  <div class="container-fluid">
    <div class="breadcrumb__content">
    <span>this link 1</span> / <span>that link 2</span> / <span>some link 3</span> / <span>other link 4</span> / <span>second last link 5</span> / <a href="/foo">foofoofoo</a> / <b class="breadcrumb__content--js-replace">barbarbar</b></div>
  </div>
</section>

CSS

*{
  box-sizing: border-box;
}
.breadcrumb {
  border-top: 1px solid #e5e5e5;
  display: block;
  padding: 0;
  border-bottom: 1px solid #e5e5e5;
  background-color: #f1f1f1;
  color: #4d5056;
  width: 352px;
  padding-right: 32px;
}

.container-fluid {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 32px;
}

.container-fluid:after,
.container-fluid:before {
  content: " ";
  display: table;
}

.breadcrumb__content {
  font-size: 10px;
  margin: 0 auto;
  height: 50px;
  width: 320px;
  min-width: 100%;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  text-overflow: clip;
  overflow: hidden;
  direction: rtl;
  text-align: left;
  overflow-x: scroll;
  background: linear-gradient(90deg, #f1f1f1 30%, hsla(0, 0%, 100%, 0)), linear-gradient(-90deg, hsla(0, 0%, 100%, 0), #f1f1f1 70%) 0 100%, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: #f1f1f1;
  background-size: 30px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

.breadcrumb__content::-webkit-scrollbar {
  display: none;
}

.breadcrumb__content {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}