JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<nav class="{{ class }} breadcrumbs">
    <ol class="breadcrumbs__list">
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 1
                
            </a>
        </li>
        <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="">
                Item 2
            </a>
        </li>
        <li class="breadcrumbs__item -active">
            <a class="breadcrumbs__link" href="">
                Item 3
            </a>
        </li>
    </ol>
</nav>

SCSS

.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;
        }
        
         #{$b}__item:not(:last-child) &::after {
          content: '';
          display: inline-block;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='link__icon -separator' viewBox='0 0 24 24' stroke='currentColor' fill='none'%3E%3Cpolyline points='9 6 15 12 9 18' /%3E%3C/svg%3E");
          width: 1em;
          height: 1em;
          vertical-align: bottom;
          transform: translateX(50%); 
        }

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