JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<div class="main">
<ol class="shopStepNav stepNav disabled">
  <li>
    <span>[Package selection]</span>
  </li>
  <li>
    <span>[Payment methods]</span>
  </li>
  <li>
    <span>[Pay]</span>
  </li>
  <li>
    <span>[Confirmation]</span>
  </li>
    </ol>
</div>

CSS

.main {
    position: reletive;
}
.disabled:before {
    background-color: rgba(255, 255, 255, 0.5);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}