JSFiddle - React, Tailwind, and code Playground

by nathanziarek

HTML

<div class="timeline">
    <span class="timeline-node state-selected">Direct Supply</span>
    <span class="timeline-node">HD Supply</span>
    <span class="timeline-node">Summary</span>
    <span class="timeline-node">Place Order</span>
</div>
<br/> <br />
<div class="timeline">
    <a href="#" class="timeline-node state-complete">Direct Supply</a>
    <span class="timeline-node state-selected">HD Supply</span>
    <span class="timeline-node">Summary</span>
    <span class="timeline-node">Place Order</span>
</div>
<br/> <br />
<div class="timeline">
    <a href="#" class="timeline-node state-complete">Direct Supply</a>
    <a href="#" class="timeline-node state-complete">HD Supply</a>
    <span class="timeline-node state-selected">Summary</span>
    <span class="timeline-node">Place Order</span>
</div>
<br/> <br />
<div class="timeline">
    <a href="#" class="timeline-node state-complete">Direct Supply</a>
    <a href="#" class="timeline-node state-complete">HD Supply</a>
    <a href="#"  class="timeline-node state-complete">Summary</a>
    <span class="timeline-node state-selected">Place Order</span>
</div>
<br/> <br />
<div class="timeline">
    <a href="#" class="timeline-node state-complete">Address</a>
    <span class="timeline-node state-selected">Shipping</span>
    <span class="timeline-node">Payment</span>
    <span class="timeline-node">Summary</span>
    <span class="timeline-node">Place Order</span>
</div>

CSS

body { font-family: Open Sans; font-size: 14px }
a { text-decoration: none }

.timeline {
  height: 30px;
  display: table;
  width: 100%;
  overflow: hidden;
  font-size: .85em;
}
.timeline .timeline-node {
  display: table-cell;
  width: 1%;
  text-align: center;
  position: relative;
  vertical-align: bottom;
  border-top: 20px #d7d7da solid;
  padding-top: 5px;
  color: #666666;
}
.timeline .timeline-node.state-complete {
  border-color: #318ec6;
}
.timeline .timeline-node.state-selected {
  border-color: #007bc4;
  color: #007bc4;
}
.timeline .timeline-node.state-selected + .timeline-node:before {
  border-right: 20px #d7d7da solid;
  border-bottom: #007bc4 20px solid;
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  height: 0px;
}
.timeline .timeline-node.state-selected:before {
  border-right: 20px #007bc4 solid;
  border-bottom: #318ec6 20px solid;
  content: "";
  position: absolute;
  top: -20px;
  left: -10px;
  height: 0px;
}