JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="horizontal-steps" style="width: 350px">
    <div class="step">
        <svg class="rob-icon" viewBox="0 0 70 51" width="100%" height="100%">
            <path d="M57.4 2.9L26.3 33.2 12.7 18.8c-2.6-2.8-6.9-2.8-9.6-.1S.3 25.8 3 28.6l18.4 19.3c2.6 2.7 6.8 2.8 9.5.2l36-35c2.7-2.7 2.8-7.1.2-10-2.6-2.7-6.9-2.8-9.7-.2z" fill="currentColor"></path>
        </svg>
        <span>Verify identity</span>
    </div>

    <div class="step selected">
        <svg class="rob-icon" viewBox="0 0 70 51" width="100%" height="100%">
            <path d="M57.4 2.9L26.3 33.2 12.7 18.8c-2.6-2.8-6.9-2.8-9.6-.1S.3 25.8 3 28.6l18.4 19.3c2.6 2.7 6.8 2.8 9.5.2l36-35c2.7-2.7 2.8-7.1.2-10-2.6-2.7-6.9-2.8-9.7-.2z" fill="currentColor"></path>
        </svg>
        <span>Authenticate identity</span>
    </div>

    <div class="step">
        <svg class="rob-icon" viewBox="0 0 70 51" width="100%" height="100%">
            <path d="M57.4 2.9L26.3 33.2 12.7 18.8c-2.6-2.8-6.9-2.8-9.6-.1S.3 25.8 3 28.6l18.4 19.3c2.6 2.7 6.8 2.8 9.5.2l36-35c2.7-2.7 2.8-7.1.2-10-2.6-2.7-6.9-2.8-9.7-.2z" fill="currentColor"></path>
        </svg>
        <span>Create new password</span>
    </div>
</div>



<div class="horizontal-steps">
    <div class="step">
        <svg class="rob-icon" viewBox="0 0 70 51" width="100%" height="100%">
            <path d="M57.4 2.9L26.3 33.2 12.7 18.8c-2.6-2.8-6.9-2.8-9.6-.1S.3 25.8 3 28.6l18.4 19.3c2.6 2.7 6.8 2.8 9.5.2l36-35c2.7-2.7 2.8-7.1.2-10-2.6-2.7-6.9-2.8-9.7-.2z" fill="currentColor"></path>
        </svg>
        <span>Verify identity</span>
    </div>

    <div class="step">
        <svg class="rob-icon" viewBox="0 0 70 51" width="100%" height="100%">
            <path d="M57.4 2.9L26.3 33.2 12.7 18.8c-2.6-2.8-6.9-2.8-9.6-.1S.3 25.8 3 28.6l18.4 19.3c2.6 2.7 6.8 2.8 9.5.2l36-35c2.7-2.7 2.8-7.1.2-10-2.6-2.7-6.9-2.8-9.7-.2z" fill="currentColor"></path>
        </svg>
        <span>Authenticate identity</span>
    </div>
    
    <div class="step selected">
       ...

SCSS

$atlantis: #000;
$white: #fff;
$gray-5: #999;
@mixin mobile {
  nothing { @content; }
}

.horizontal-steps {
	$line-width: 5px;
	$step-space: 20px;

	// Current step styles
	%header-selected {
		content: counter(step);
		background: $gray-5;
		color: $white;
	}

	%label-selected {
		color: $gray-5;
	}

	// Complete step styles
	%header-past {
		display: block;
		text-align: center;
		line-height: 1.6em;
		content: "";
		background: $atlantis;
		border-radius: 50%;
		color: $white;
		font-size: 1.85em;
		font-weight: 400;
		height: 50px;
		margin: 0 auto 10px auto;
		width: 50px;
		position: relative;
	}

	%label-past {
		color: $atlantis;
		display: block;
		font-weight: 400;
		padding: 0 1em;
		text-align: center;

		@include mobile {
			padding: 0 5px;
		}
	}

	// Incomplete step styles
	%header-future {
		background: $white;
		box-shadow: inset 0 0 0 4px $gray-5;
		color: $gray-5;
		content: counter(step);
	}

	%label-future {
		color: $gray-5;
	}

	position: relative;
	z-index: 1;
	counter-reset: step;
	display: flex;

	.step {
		counter-increment: step;
		width: 160px;
		position: relative;
		z-index: 1;
		margin-right: $step-space;

		svg.rob-icon {
			color: $white;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 52px;
			padding: 15px;
		}

		&.selected {
			&::before { @extend %header-selected; }
			& > span { @extend %label-selected; }

			& ~ .step {
				&::before { @extend %header-future; }
				& > span { @extend %label-future; }
				span::before { background: $gray-5; }
			}

			&, & ~ .step {
				svg.rob-icon { display: none; }
				span::after { background: $gray-5; }
			}
		}

		&::before { @extend %header-past; }
		& > span {
			@extend %label-past;
			position: relative;

			&::after {
				background: $atlantis;
				border-radius: 5px 0 0 5px;
				content: "";
				height: 5px;
				left: calc(50% + 40px);
				position: absolute;
				top: #{50px / 2 - 5 / 2 - 60};
				width: calc(50% - 20px);
			}

			&::before...