JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<ol start="8" class="shopStepNav stepNav">
  <li class="active">
    <span>[Package selection]</span>
  </li>
  <li>
    <span>[Payment methods]</span>
  </li>
  <li>
    <span>[Pay]</span>
  </li>
  <li>
    <span>[Confirmation]</span>
  </li>
</ol>

CSS

.stepNav {
    counter-reset: item;
    display: flex;
    margin-left: 0;
    padding-left: 0;
}
.stepNav li {
		background: #948aac;
		@include padding (0, 0, 0, 47px);
		position: relative;
		overflow: hidden;
		min-width: 186px;
		-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1;         /* OLD - Firefox 19- */
		width: 28%;               /* For old syntax, otherwise collapses. */
		-webkit-flex: 1;          /* Chrome */
		-ms-flex: 1;              /* IE 10 */
		flex: 1;
    float: left;
}
		li span {
			font-size: 15px;
			line-height: 40px;
			font-weight: bold;
			cursor: default;
			overflow: hidden;
			display: inline-block;
			white-space: nowrap;
			width: 215px;
			text-overflow: ellipsis;
		}

.stepNav li:nth-child(1):nth-last-child(4) span, 
.stepNav li:nth-child(2):nth-last-child(3) span, 
.stepNav li:nth-child(3):nth-last-child(2) span, 
.stepNav li:nth-child(4):nth-last-child(1) span {
			width: 155px;
    background: black;
		}

		li span:before {
			content: counter(item, decimal);
			counter-increment: item;
			width: 33px;
			border-radius: 2em;
			text-align: center;
			color: $starVegasPurple;
			font-size: 23px;
			height: 34px;
			line-height: 34px;
			font-weight: bold;
			position: absolute;
			top: 5px;
			box-shadow: 0 2px 5px #2E2B34 inset;
		}