JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<nav class="{{ class }} breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 1
                <svg class="link__icon -separator" viewBox="0 0 24 24" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 2
                <svg class="link__icon -separator" viewBox="0 0 24 24" stroke="currentColor" fill="none"><polyline points="9 6 15 12 9 18" /></svg>
            </a>
        </li>
        <li class="breadcrumbs__item -active">
            <a class="breadcrumbs__link" href="">
                Item 3
            </a>
        </li>
    </ol>
</nav>

SCSS

.link__icon {
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  
  &.-separator {
    transform: translateX(50%);
  }
}

.breadcrumbs {
    $b: &;

    &__list {
        display: flex;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    &__item {
        margin-bottom: 0;
    }

    &__link {
        color: blue;
        display: block;
        padding: 0.5rem;
        
        &:hover {
            color: red;
        }

        .breadcrumbs__item:first-child & {
            margin-left: -0.5rem;
        }

    }
}