JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="progress">
	<li class="active">First step: Choose</li>
	<li>Step two</li>
	<li>Three</li>
</ol>

SCSS

.progress{
  counter-reset: item;
	display: flex;
	padding: 5px;
	border: 1px solid #bbb;
	margin: 30px auto;

	li {
		list-style-type: none;
		counter-increment: item;
    flex: 1 0 25%;

		&:before {
			display: inline-block;
			width: 1em;
			padding-right: 0.5em;
			font-weight: bold;
			// color: #444;
			text-align: right;
			content: counter(item) ".";
		}

		color: #bbb;
		margin-left: 50px;
		&:first-of-type {
			margin-left: 0;
		}
		padding: 2px 12px;
		border-radius: 3px;
		background: #bbb;
		color: #fff;

		&.active {
			background: blue;
		}
	}
}