JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="c-breadcrumb" data-test="c-breadcrumb">
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">Region number 2</a></span>
  <span class="c-padding-simulate"></span>
</div>

<div class="c-breadcrumb" data-test="c-breadcrumb">
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
  <span class="c-breadcrumb-item"><a class="c-breadcrumb-link">All</a></span>
  <span class="c-padding-simulate"></span>
</div>

CSS

.c-breadcrumb-item {
	 display: inline-block;
	 font-size: 1.3em;
	 font-weight: 500;
	 letter-spacing: 0.8px;
	 text-transform: uppercase;
	 color: rgba(153, 34, 51, 0.5);
}
 .c-breadcrumb-item:not(:nth-last-child(2)) .c-breadcrumb-link {
	 color: rgba(153, 34, 51, 0.5);
	 cursor: pointer;
}
 .c-breadcrumb-item:not(:nth-last-child(2)) .c-breadcrumb-link:hover {
	 text-decoration: underline;
}
 .c-breadcrumb-item:not(:nth-last-child(2)) .c-breadcrumb-link:active {
	 color: #923;
	 text-decoration: underline;
}
 .c-breadcrumb-item + .c-breadcrumb-item:before {
	 content: '>';
	 padding: 0 4px;
}
 .c-breadcrumb-item:nth-last-child(2) {
	 animation: fadeIn 0.4s;
}
 .c-breadcrumb-item:nth-last-child(2) .c-breadcrumb-link {
	 color: #258;
}