Conversion Funnel Mini

<div class="nuda-kpi-funnel">
  <div class="nuda-kpi-funnel__title">Conversion Funnel</div>
  <div class="nuda-kpi-funnel__row">
    <span class="nuda-kpi-funnel__stage">Visits</span>
    <div class="nuda-kpi-funnel__bar-wrap">
      <div class="nuda-kpi-funnel__bar" style="width:100%;background:#e4ff54"></div>
    </div>
    <span class="nuda-kpi-funnel__count">18,400</span>
  </div>
  <div class="nuda-kpi-funnel__row">
    <span class="nuda-kpi-funnel__stage">Sign-ups</span>
    <div class="nuda-kpi-funnel__bar-wrap">
      <div class="nuda-kpi-funnel__bar" style="width:64%;background:#b8d400"></div>
    </div>
    <span class="nuda-kpi-funnel__count">4,320</span>
  </div>
  <div class="nuda-kpi-funnel__row">
    <span class="nuda-kpi-funnel__stage">Activated</span>
    <div class="nuda-kpi-funnel__bar-wrap">
      <div class="nuda-kpi-funnel__bar" style="width:38%;background:#88a800"></div>
    </div>
    <span class="nuda-kpi-funnel__count">1,870</span>
  </div>
  <div class="nuda-kpi-funnel__row">
    <span class="nuda-kpi-funnel__stage">Paid</span>
    <div class="nuda-kpi-funnel__bar-wrap">
      <div class="nuda-kpi-funnel__bar" style="width:18%;background:#ff6b6b"></div>
    </div>
    <span class="nuda-kpi-funnel__count">540</span>
  </div>
</div>

.nuda-kpi-funnel {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 240px;
}

.nuda-kpi-funnel__title {
  color: #777;
  font-size: .73rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .2rem;
}

.nuda-kpi-funnel__row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.nuda-kpi-funnel__stage {
  color: #cfcfcf;
  font-size: .72rem;
  width: 62px;
  flex-shrink: 0;
}

.nuda-kpi-funnel__bar-wrap {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}

.nuda-kpi-funnel__bar {
  height: 100%;
  border-radius: 3px;
  animation: _nuda-kpiFunnelFill .7s ease-out;
}

.nuda-kpi-funnel__count {
  color: #555;
  font-size: .7rem;
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

@keyframes _nuda-kpiFunnelFill {
  from {
    width: 0;
  }
  to {
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-kpi-funnel__bar {
    animation: none;
  }
}