Vertical Tabs

<div class="nuda-accx-vtabs">
  <div class="nuda-accx-vtabs__sidebar" role="tablist" aria-orientation="vertical">
    <button class="nuda-accx-vtabs__tab nuda-accx-vtabs__tab--active" role="tab" aria-selected="true">
      <span class="nuda-accx-vtabs__icon">&#9654;</span>
      <span class="nuda-accx-vtabs__tlabel">General</span>
    </button>
    <button class="nuda-accx-vtabs__tab" role="tab" aria-selected="false">
      <span class="nuda-accx-vtabs__icon">&#9632;</span>
      <span class="nuda-accx-vtabs__tlabel">Security</span>
    </button>
    <button class="nuda-accx-vtabs__tab" role="tab" aria-selected="false">
      <span class="nuda-accx-vtabs__icon">&#9670;</span>
      <span class="nuda-accx-vtabs__tlabel">Advanced</span>
    </button>
  </div>
  <div class="nuda-accx-vtabs__content" role="tabpanel">
    <p class="nuda-accx-vtabs__ctitle">General Settings</p>
    <div class="nuda-accx-vtabs__row">
      <span class="nuda-accx-vtabs__key">Theme</span>
      <span class="nuda-accx-vtabs__val">Dark</span>
    </div>
    <div class="nuda-accx-vtabs__row">
      <span class="nuda-accx-vtabs__key">Language</span>
      <span class="nuda-accx-vtabs__val">English</span>
    </div>
    <div class="nuda-accx-vtabs__row">
      <span class="nuda-accx-vtabs__key">Region</span>
      <span class="nuda-accx-vtabs__val">US</span>
    </div>
  </div>
</div>

.nuda-accx-vtabs {
  display: flex;
  gap: 0;
  width: 100%;
  background: #141414;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px;
}

.nuda-accx-vtabs__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: .35rem;
  background: #111;
  border-right: 1px solid rgba(255,255,255,.07);
  min-width: 72px;
}

.nuda-accx-vtabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: none;
  border: none;
  border-radius: 8px;
  padding: .4rem .3rem;
  cursor: pointer;
  color: #555;
  transition: background .15s,color .15s;
}

.nuda-accx-vtabs__tab--active {
  background: rgba(228,255,84,.12);
  color: #e4ff54;
}

.nuda-accx-vtabs__icon {
  font-size: .55rem;
  line-height: 1;
}

.nuda-accx-vtabs__tlabel {
  font-size: .52rem;
  font-weight: 600;
  color: inherit;
}

.nuda-accx-vtabs__content {
  flex: 1;
  padding: .6rem .65rem;
  animation: _nuda-accxvtabs-fade .2s ease-out;
}

.nuda-accx-vtabs__ctitle {
  color: #fafafa;
  font-size: .65rem;
  font-weight: 700;
  margin: 0 0 .45rem;
}

.nuda-accx-vtabs__row {
  display: flex;
  justify-content: space-between;
  padding: .2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.nuda-accx-vtabs__row:last-child {
  border-bottom: none;
}

.nuda-accx-vtabs__key {
  color: #666;
  font-size: .58rem;
}

.nuda-accx-vtabs__val {
  color: #cfcfcf;
  font-size: .58rem;
  font-weight: 600;
}

@keyframes _nuda-accxvtabs-fade {
  from {
    opacity: 0;
    transform: translateX(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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