JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class="row member-process-default no-margin">
            <div class="col-sm-2 banner-content " id="application">
        <a href="/BCtA-Phase2/bcta/registration" class="member-path-link">
              <img src="http://localhost/BCtA-Phase2/bcta/sites/all/themes/bcta/images/Application.png" alt="application">
              <span class="banner-img-caption highlight">Application</span>
          </a>
      </div>
      <div class="col-sm-2 banner-content active-item" id="download-center">
        <a href="/BCtA-Phase2/bcta/dashboard/download-center" class="member-path-link">
              <img src="http://localhost/BCtA-Phase2/bcta/sites/all/themes/bcta/images/Download_small.png" alt="download center">
              <span class="banner-img-caption highlight">Download Center</span>
          </a>
      </div>
                      </div>

CSS

.member-process-default {
  background-color: #000;
  margin: 0;
}
.banner-content {
  height: 110px;
  display: table;
  width: 14%;
  text-align: center;
  float: left;
}
.banner-content img {
  margin: 0 auto;
  padding-bottom: 10px;
}
.banner-img-caption {
  color: #fff;
  font-size: 14px;
  line-height: 18px;
}
.active-item {
  background-color: #0270b8;
  border-radius: 5px;
  position: relative;
  max-width: 120px;
}
.member-path-link {
  display: table-cell;
  vertical-align: middle;
}
.active-item:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  bottom: -25px;
  left: 50%;
  border: 20px solid transparent;
  border-bottom-color: #fff;
  margin-left: -20px;
}