<div>
    <ol class="steps">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps">
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-primary dark:before:bg-accent">
        <div
          class="step-header rounded-full bg-primary text-white dark:bg-accent"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps line-space">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps [--size:1rem] [--line:1px]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        ></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
  <div>
    <ol class="steps">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
  <div>
    <ol class="steps [--size:2.75rem] [--line:.5rem]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps is-vertical">
      <li
        class="step  space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li
        class="step  space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li
        class="step  space-x-4 pb-8 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step  space-x-4 before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps is-vertical line-space">
      <li
        class="step  space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          1
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li
        class="step  space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          2
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li
        class="step  space-x-4 pb-12 before:bg-slate-200 dark:before:bg-navy-500"
      >
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          3
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 3</h3>
      </li>
      <li class="step  space-x-4 before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white"
        >
          4
        </div>
        <h3 class="text-slate-600 dark:text-navy-100">Step 4</h3>
      </li>
    </ol>
  </div>
              

                
  <div>
    <ol class="steps line-space [--size:.75rem] [--line:1px]">
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-primary dark:bg-accent"></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 1</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div
          class="step-header rounded-full bg-secondary dark:bg-secondary-light"
        >
          <span
            class="inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80 dark:bg-secondary-light"
          ></span>
        </div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-info"></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-error"></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
      <li class="step before:bg-slate-200 dark:before:bg-navy-500">
        <div class="step-header rounded-full bg-warning"></div>
        <h3 class="text-xs-plus text-slate-600 dark:text-navy-100">Step 2</h3>
      </li>
    </ol>
  </div>