JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<ol class="progress">
  <li class="is-active" data-step="1">
    Step 1
  </li>
  <li data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--medium">
  <li class="is-complete" data-step="1">
    Step 1
  </li>
  <li class="is-active" data-step="2">
    Step 2
  </li>
  <li data-step="3" class="progress__last">
    Step 3
  </li>
</ol>

<ol class="progress progress--large">
  <li class="is-complete" data-step="1">
    Create Account
  </li>
  <li class="is-complete" data-step="2">
    Login
  </li>
  <li class="is-active" data-step="3">
    Payment
  </li>
  <li data-step="4" class="progress__last">
    Confirm
  </li>
</ol>

SCSS

$complete: #2ECC71;
$active: #3498DB;
$mute: #DFE3E4;

.progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: darken($mute, 33%);

  > li {
    position: relative;
    display: table-cell;
    text-align: center;
    font-size: 0.8em;
    
    &:before {
      content: attr(data-step);
      display: block;
      margin: 0 auto;
      background: $mute;
      width: 3em;
      height: 3em;
      text-align: center; //IE8 doesn't inherit this style
      margin-bottom: 0.25em;
      line-height: 3em;
      border-radius: 100%;
      position: relative;
      z-index: 1000;
    }
    &:after {
      content: '';
      position: absolute;
      display: block;
      background: $mute;
      width: 100%;
      height: 0.5em;
      top: 1.25em;
      left: 50%;
      margin-left: 1.5em\9;
      z-index: -1;
    }
    &:last-child:after {
      display: none;
    }
    &.is-complete {
      color: $complete;
      
      &:before,
      &:after {
        color: #FFF;
        background: $complete;
      }
    }
    &.is-active {
      color: $active;
      
      &:before {
        color: #FFF;
        background: $active;
      }
    }
  }
}
  /**
   * Needed for IE8
   */
  .progress__last:after {
    display: none!important;
  }

  /**
   * Size Extensions
   */
  .progress--medium {
    font-size: 1.5em;
  }
  .progress--large {
    font-size: 2em;
  }

/**
 * Some Generic Stylings
 */
*, *:after, *:before {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 1.5em;
}
.progress {
  margin-bottom: 3em;
}
a {
  color: $active;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}
body {
  text-align: center;
  color: #444;
}