Underline Tabs

<div class="nuda-accx-ul">
  <div class="nuda-accx-ul__nav" role="tablist">
    <button class="nuda-accx-ul__tab" role="tab" aria-selected="false">Activity</button>
    <button class="nuda-accx-ul__tab nuda-accx-ul__tab--active" role="tab" aria-selected="true">Analytics</button>
    <button class="nuda-accx-ul__tab" role="tab" aria-selected="false">Reports</button>
    <button class="nuda-accx-ul__tab" role="tab" aria-selected="false">Settings</button>
  </div>
  <div class="nuda-accx-ul__panel" role="tabpanel">
    <div class="nuda-accx-ul__stat">
      <span class="nuda-accx-ul__num">24,891</span>
      <span class="nuda-accx-ul__label">Page views this week</span>
    </div>
    <div class="nuda-accx-ul__bar">
      <span class="nuda-accx-ul__fill"></span>
    </div>
    <div class="nuda-accx-ul__meta">
      <span class="nuda-accx-ul__up">&#9650; 12.4%</span>
      <span class="nuda-accx-ul__vs">vs last week</span>
    </div>
  </div>
</div>

.nuda-accx-ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.nuda-accx-ul__nav {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 0;
}

.nuda-accx-ul__tab {
  background: none;
  border: none;
  padding: .45rem .55rem;
  font-size: .6rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
  white-space: nowrap;
}

.nuda-accx-ul__tab--active {
  color: #fafafa;
  border-bottom-color: #e4ff54;
}

.nuda-accx-ul__panel {
  background: #141414;
  padding: .65rem .7rem;
  animation: _nuda-accxul-in .2s ease-out;
}

.nuda-accx-ul__stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-bottom: .5rem;
}

.nuda-accx-ul__num {
  color: #fafafa;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.nuda-accx-ul__label {
  color: #555;
  font-size: .55rem;
}

.nuda-accx-ul__bar {
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
  margin-bottom: .35rem;
}

.nuda-accx-ul__fill {
  display: block;
  background: #e4ff54;
  height: 100%;
  width: 72%;
  border-radius: 4px;
}

.nuda-accx-ul__meta {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.nuda-accx-ul__up {
  color: #e4ff54;
  font-size: .58rem;
  font-weight: 700;
}

.nuda-accx-ul__vs {
  color: #555;
  font-size: .55rem;
}

@keyframes _nuda-accxul-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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