Stepper/Wizard Generator

<div class="stepper-wizard">
  <div class="steps-container">
    <div class="step-item completed">
      <div class="step-indicator">✓</div>
      <div class="step-content">
        <span class="step-label">Account</span>
        <span class="step-description">Create your account</span>
      </div>
      <div class="step-connector"></div>
    </div>
    <div class="step-item active">
      <div class="step-indicator">2</div>
      <div class="step-content">
        <span class="step-label">Profile</span>
        <span class="step-description">Set up your profile</span>
      </div>
      <div class="step-connector"></div>
    </div>
    <div class="step-item pending">
      <div class="step-indicator">3</div>
      <div class="step-content">
        <span class="step-label">Payment</span>
        <span class="step-description">Add payment method</span>
      </div>
      <div class="step-connector"></div>
    </div>
    <div class="step-item pending">
      <div class="step-indicator">4</div>
      <div class="step-content">
        <span class="step-label">Complete</span>
        <span class="step-description">Review and confirm</span>
      </div>
      
    </div>
  </div>
  <div class="progress-bar">
    <div class="progress-fill" style="width: 33.33333333333333%"></div>
  </div>
  <div class="stepper-navigation">
    <button class="nav-button prev" >Previous</button>
    <button class="nav-button next" >
      Next
    </button>
  </div>
</div>