JSFiddle - React, Tailwind, and code Playground

by Matthew Watzman

HTML

<div style="white-space:nowrap;overflow:hidden;min-width:1000px">
    <a class="custom-breadcrumb" href="#">Company</a>
    <span class="custom-breadcrumb nav">&nbsp;>&nbsp;</span>
    <a class="custom-breadcrumb" href="#">Department</a>
    <span class="custom-breadcrumb nav">&nbsp;>&nbsp;</span>
    <h3 class="custom-breadcrumb">Employee</h3>
</div>

CSS

.custom-breadcrumb {
    display: inline-block;
    color: #c46346;
    float: left;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.1;
    margin-top: 20px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: underline;
}
.custom-breadcrumb:active, .custom-breadcrumb:hover, .custom-breadcrumb:focus, .custom-breadcrumb:visited {
    color: #c46346;
}
.custom-breadcrumb.nav {
    color: #777777;
    float: left;
    text-decoration: none;
}
h3.custom-breadcrumb {
    float: none;
    text-decoration: none;
}