JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
  <div class="step" style="background-color: green;">Step 3</div>
</div>

SCSS

$stepNumber: 3;

@for $i from 1 through $stepNumber {
  .step:nth-of-type(#{$i}) {
    transform: translateX(calc(#{$i - 1} * 60px));
  }
}