JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div id="itemDisplay">
<a href="www.abc.com" class="step1only"><span id="step1" class="step_on" title="Home">Home</span></a>
<span id="step2" class="step_off" title="Vehicle">Vehicle</span>
<span id="step3" class="step_off" title="Vans &amp; Trucks">Vans &amp; Trucks</span>
<span id="step4" class="step_off" title="Vanagon">Vanagon</span>
</div>

CSS

#itemDisplay span { 
	float: left; 
	display: inline-block;
	background: brown;       
	background: hsla(34,85%,35%,1); 
}
#itemDisplay a span:hover { background: hsla(34,85%,25%,1); }
#itemDisplay a span { 
	background: brown;       
	background: hsla(34,85%,35%,1); 
	position: relative; 
	display: block;
	float: left;
}
#itemDisplay a span:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 30px solid transparent;    
	border-bottom: 30px solid transparent;
	border-left: 30px solid hsla(34,85%,35%,1);
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}