JSFiddle - React, Tailwind, and code Playground

HTML

<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
	<li><a href="/">Home</a></li>
	<li><a href="/reamers">Reamers</a></li>
	<li>Jarno Reamers</li>
</ol>
</nav>

<p class="first"><a href="https://gammons.com/contact-us">Contact Us</a> for custom reamers or to ask about other offerings not listed below.</p>

CSS

.first {
  display: inline-block;
  width: 100%;
}
nav.breadcrumb {
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 4px;
  background: hsl(300, 14%, 97%);
  font-size: 14px;
  float: left;
  max-width: 45%;
}


nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  left: 0px;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentColor;
  height: 0.8em;
  content: '';
}

nav.breadcrumb [aria-current="page"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
  max-width: 45%;
}