Scrollspy Dots

<nav class="nuda-navx-dots" aria-label="Page sections">
  <div class="nuda-navx-dots__track">
    <a class="nuda-navx-dots__dot nuda-navx-dots__dot--active" href="#s1" aria-label="Section 1">
      <span class="nuda-navx-dots__tooltip">Hero</span>
    </a>
    <a class="nuda-navx-dots__dot" href="#s2" aria-label="Section 2">
      <span class="nuda-navx-dots__tooltip">Features</span>
    </a>
    <a class="nuda-navx-dots__dot" href="#s3" aria-label="Section 3">
      <span class="nuda-navx-dots__tooltip">Pricing</span>
    </a>
    <a class="nuda-navx-dots__dot" href="#s4" aria-label="Section 4">
      <span class="nuda-navx-dots__tooltip">Team</span>
    </a>
    <a class="nuda-navx-dots__dot" href="#s5" aria-label="Section 5">
      <span class="nuda-navx-dots__tooltip">Contact</span>
    </a>
  </div>
</nav>

.nuda-navx-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.nuda-navx-dots__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 10px 8px;
}

.nuda-navx-dots__dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  text-decoration: none;
  transition: background .2s,transform .2s;
}

.nuda-navx-dots__dot:hover {
  background: rgba(255,255,255,.5);
  transform: scale(1.3);
}

.nuda-navx-dots__dot--active {
  background: #e4ff54;
  width: 10px;
  height: 24px;
  border-radius: 5px;
}

.nuda-navx-dots__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  color: #cfcfcf;
  font-size: .7rem;
  white-space: nowrap;
  padding: .25rem .55rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.nuda-navx-dots__dot:hover .nuda-navx-dots__tooltip {
  opacity: 1;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-navx-dots__dot,.nuda-navx-dots__tooltip {
    transition: none;
  }
}