JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="breadcrumbs-one">
<li><a href="">Lorem ipsum</a></li>
<li><a href="">Vivamus nisi eros</a></li>
<li><a href="" class="current">Nulla sed lorem risus</a></li>
</ul>
CSS
html{
background: #333;
}
a{
color: #777;
}
/* ------------------------------------------- */
ul{
margin: 0;
padding: 0;
list-style: none;
}
/* ------------------------------------------- */
#breadcrumbs-one{
background: #eee;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}
#breadcrumbs-one li{
float: left;
}
#breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background: rgb(71,71,71); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:...