JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>-- Responsive Breadcrumbs - 480px --</p>

<!-- Breadcrumbs -->

<div class="crumb">

<span><a href="#">Home</a></span>

<span><a href="#">Something</a></span>

<span id="crumbMob"><a href="#">Bridging Loans</a></span>

<span id="crumLast">Bridging Loan Calculator</span>

</div>

CSS

p {color:#fff;max-width:480px;background-color:#000;text-align:center;padding:5px 0;}

.crumb {font-family:arial;}
.crumb span {padding:0 10px 0 0;}
.crumb span a {text-decoration:none;color:blue;}
.crumb span::after {padding:0 0 0 10px;content: "›";}
#crumLast::after {padding:0;content: "";}

@media screen and (max-width:480px){  

.crumb span {display:none;}
#crumbMob {display:block;}
#crumbMob::after {padding:0;content: "";}
#crumbMob a::before {padding:0;content: "See ";}
#crumbMob::before {padding:0;content: "‹ ";}
}