JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>BreadCrumbs</title>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="breadcrumbs.css">
  </head>
  <body>

    <ul class="crumb-trail clearfix">
      <li class="crumb pull-left">
        Home
      </li>
      <li class="crumb pull-left">
        Forums
      </li>
      <li class="crumb pull-left">
        Search page
      </li>
      <li class="crumb pull-left">
        Preview: Search criteria
      </li>
    </ul>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

CSS

.crumb-trail {
	background-color: #CCD2D8;
	color: #62717C;
	list-style: none;
	padding: 0px;
	margin: auto;
	width: 80%;
}

.crumb {
	padding: 4px 16px;
	position: relative;
}


.crumb:not(:last-child):before,
.crumb:not(:last-child):after {
	content: '';
	display: inline-block;
	height: 1px;
	width: 17px;
	position: absolute;
	right: -7px;
	background-color: #fff;
}

.crumb:before {
	top: 6px;
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.crumb:after {
	bottom: 6px;
	-moz-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
}