JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="breadcrumb">
    
    <a href="#">Bla</a>
    <a href="#"> Enzovoort</a>
    <a href="#"> Enzovoort</a>
    
</div>

CSS

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);

* {margin: 0; padding: 0;}

html, body {min-height: 100%;}

body {
	text-align: center;
	padding-top: 100px;
	background: #689976;
	background: linear-gradient(#689976, #ACDACC);
	font-family: 'Merriweather Sans', arial, verdana;
}

.breadcrumb {
	/*centering*/
	display: inline-block;
	overflow: hidden;
	border-radius:0;
	counter-reset: flag; 

}

.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: #444;
	padding: 0 20px 0 60px;
	position: relative;    
    width:50px;
    text-align:left;
    text-overflow:ellipsis;
    background: rgb(233,233,233);
background: rgb(233,233,233);
background: -moz-linear-gradient(top,  rgba(233,233,233,1) 14%, rgba(250,250,250,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,rgba(233,233,233,1)), color-stop(100%,rgba(250,250,250,1)));
background: -webkit-linear-gradient(top,  rgba(233,233,233,1) 14%,rgba(250,250,250,1) 100%);
background: -o-linear-gradient(top,  rgba(233,233,233,1) 14%,rgba(250,250,250,1) 100%);
background: -ms-linear-gradient(top,  rgba(233,233,233,1) 14%,rgba(250,250,250,1) 100%);
background: linear-gradient(to bottom,  rgba(233,233,233,1) 14%,rgba(250,250,250,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#fafafa',GradientType=0 );

    
    	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;

}

.breadcrumb a:first-child {
	padding-left: 46px;
	
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
    	
}


.breadcrumb a.active, .breadcrumb a:hover{
	background: rgb(233,233,233);
background: -moz-linear-gradient(top,  rgba(233,233,233,1) 94%, rgba(250,250,250,1) 100%);
background: -webkit-gradient(linear, left top, left bottom,...