JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ol class="cmp-tunnel">
  <li class="cmp-tunnel-step passed">
    <span class="cmp-tunnel-label">E-mail</span>
  </li>
  <li class="cmp-tunnel-step current">
    <span class="cmp-tunnel-label">Livraison</span>
  </li>
  <li class="cmp-tunnel-step">
    <span class="cmp-tunnel-label">Paiement</span>
  </li>
</ol>

SCSS

$stepper-height:25px;

.cmp {
  &-tunnel {
    counter-reset: tunnel;
    display: flex;
    margin-top: 34px;
    margin-bottom: 34px;
    &-step {
      counter-increment: tunnel;
      display: flex;
      align-items: center;
      font-size: 24px;
      margin-bottom: $stepper-height;
      & + & {
        flex: 1 0 auto;
        &:before {
          content: "";
          flex: 1;
          display: block; /* IE10 fix */
          border-bottom: 1px solid #737373;
        }
      }
      &.current ~ & {
        color: #737373;
      }
    }
      &-label {
        position: relative;
        padding: 0 10px;
        text-align: center;
        &:after {
          content: counter(tunnel);
          position: absolute;
          top: 100%;
          left: 50%;
          height: $stepper-height;
          font-size: 16px;
          line-height: $stepper-height;
          font-weight: bold;
          transform:translateX(-50%);
        }
        
        @at-root {
          .passed &:after {
            color: red;
          }
        }
      }
  }
}

ol {max-width: 600px; margin-left: auto; margin-right: auto;}