JSFiddle - React, Tailwind, and code Playground

Timeline - Deloitte

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="timeline">
  <div class="timeline-wrapper">
    <div class="timeline-list">
      <ul>
        <li><a href="#" style="left: 5%;">Exit<br>Options</a></li>
        <li><a href="#" style="left: 15%;">Short<br>Listing</a></li>
        <li><a href="#" style="left: 25%;">RFP</a></li>
        <li><a href="#" style="left: 32%;">Contract<br>Signature</a></li>
        <li><a href="#" style="left: 43%;">PCV</a></li>
        <li><a href="#" style="left: 50%;">Post PCV<br>Contract</a></li>
        <li><a href="#" style="left: 60%;">Commencement<br>Date</a></li>
        <li><a href="#" style="left: 77%;">Begin<br>Service<br>Report</a></li>
        <li><a href="#" style="left: 85%;">SLA<br>Measurement</a></li>
      </ul>
    </div>
  </div>
</div>

CSS

/* Do not copy */
@import: url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
body {
  /* Do not copy */
  font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
  background-color: #e8eae9;
}

.timeline {
  position: relative;
  height: 150px;
  width: 100%;
  margin: 5% auto 0;
}

.timeline-wrapper {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.timeline-list {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 75px;
  height: 2px;
  background: #D0D0CE;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}

.timeline-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-list a {
  color: #7b9d6f;
  text-decoration: none;
  font-size: 0.8em;
}

.timeline-list a {
  position: absolute;
  max-width: 115px;
  word-break: break-word;
  bottom: 0;
  z-index: 2;
  text-align: center;
  padding-bottom: 15px;
  color: #383838;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.timeline-list a.selected {
  pointer-events: none;
}

.timeline-list a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #00A3E0;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}

.timeline-list a.selected::after {
  background-color: #86BC25;
}

/* DO NOT COPY THIS */

</style> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <style>

JavaScript

$('.timeline a').on('click', function() {
	event.preventDefault();
  $('.timeline a').removeClass('selected');
  $(this).addClass('selected');
});