Pill Tabs

<div class="nuda-accx-pill">
  <div class="nuda-accx-pill__nav" role="tablist">
    <button class="nuda-accx-pill__tab nuda-accx-pill__tab--active" role="tab" aria-selected="true">Overview</button>
    <button class="nuda-accx-pill__tab" role="tab" aria-selected="false">Features</button>
    <button class="nuda-accx-pill__tab" role="tab" aria-selected="false">Pricing</button>
  </div>
  <div class="nuda-accx-pill__panel" role="tabpanel">
    <p class="nuda-accx-pill__heading">Product Overview</p>
    <p class="nuda-accx-pill__body">Everything you need to ship fast. No bloat, no vendor lock-in.</p>
    <div class="nuda-accx-pill__dots">
      <span class="nuda-accx-pill__dot nuda-accx-pill__dot--a"></span>
      <span class="nuda-accx-pill__dot nuda-accx-pill__dot--b"></span>
      <span class="nuda-accx-pill__dot nuda-accx-pill__dot--c"></span>
    </div>
  </div>
</div>

.nuda-accx-pill {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
}

.nuda-accx-pill__nav {
  display: flex;
  gap: .3rem;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50px;
  padding: .25rem;
}

.nuda-accx-pill__tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 50px;
  padding: .3rem .5rem;
  font-size: .6rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: background .2s,color .2s;
  white-space: nowrap;
}

.nuda-accx-pill__tab--active {
  background: #e4ff54;
  color: #000;
}

.nuda-accx-pill__panel {
  background: #141414;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .65rem .7rem;
  animation: _nuda-accxpill-in .2s ease-out;
}

.nuda-accx-pill__heading {
  color: #fafafa;
  font-size: .68rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.nuda-accx-pill__body {
  color: #777;
  font-size: .58rem;
  margin: 0 0 .5rem;
  line-height: 1.55;
}

.nuda-accx-pill__dots {
  display: flex;
  gap: .3rem;
}

.nuda-accx-pill__dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
}

.nuda-accx-pill__dot--a {
  background: #e4ff54;
}

.nuda-accx-pill__dot--b {
  background: rgba(228,255,84,.35);
}

.nuda-accx-pill__dot--c {
  background: rgba(228,255,84,.12);
}

@keyframes _nuda-accxpill-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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