Icon Tabs

<div class="nuda-accx-ict">
  <div class="nuda-accx-ict__nav" role="tablist">
    <button class="nuda-accx-ict__tab" role="tab" aria-selected="false">
      <svg class="nuda-accx-ict__svg" viewBox="0 0 16 16" fill="none">
        <rect x="2" y="2" width="5" height="5" rx="1" fill="currentColor" opacity=".5"/>
        <rect x="9" y="2" width="5" height="5" rx="1" fill="currentColor" opacity=".5"/>
        <rect x="2" y="9" width="5" height="5" rx="1" fill="currentColor" opacity=".5"/>
        <rect x="9" y="9" width="5" height="5" rx="1" fill="currentColor" opacity=".5"/>
      </svg>
      <span>Dashboard</span>
    </button>
    <button class="nuda-accx-ict__tab nuda-accx-ict__tab--active" role="tab" aria-selected="true">
      <svg class="nuda-accx-ict__svg" viewBox="0 0 16 16" fill="none">
        <path d="M8 1L10 6H15L11 9.5L12.5 15L8 11.5L3.5 15L5 9.5L1 6H6Z" fill="currentColor"/>
      </svg>
      <span>Starred</span>
    </button>
    <button class="nuda-accx-ict__tab" role="tab" aria-selected="false">
      <svg class="nuda-accx-ict__svg" viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="5" r="3" fill="currentColor" opacity=".6"/>
        <path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity=".6"/>
      </svg>
      <span>Profile</span>
    </button>
  </div>
  <div class="nuda-accx-ict__panel" role="tabpanel">
    <div class="nuda-accx-ict__items">
      <div class="nuda-accx-ict__item">
        <span class="nuda-accx-ict__star">&#9733;</span>
        <div class="nuda-accx-ict__info">
          <span class="nuda-accx-ict__ititle">NudaUI Components</span>
          <span class="nuda-accx-ict__isub">Pinned 2 days ago</span>
        </div>
        <span class="nuda-accx-ict__badge">New</span>
      </div>
      <div class="nuda-accx-ict__item">
        <span class="nuda-accx-ict__star">&#9733;</span>
        <div class="nuda-accx-ict__info">
          <span class="nuda-accx-ict__ititle">Design System Docs</span>
          <span class="nuda-accx-ict__isub">Pinned 1 week ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

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

.nuda-accx-ict__nav {
  display: flex;
  gap: 2px;
  background: #111;
  border: 1px solid rgba(255,255,255,.07);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: .3rem .3rem 0;
}

.nuda-accx-ict__tab {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  border-radius: 6px 6px 0 0;
  padding: .35rem .55rem;
  font-size: .58rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background .15s,color .15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nuda-accx-ict__tab--active {
  background: #141414;
  color: #fafafa;
  border-bottom-color: #e4ff54;
}

.nuda-accx-ict__svg {
  width: 12px;
  height: 12px;
  color: currentColor;
  flex-shrink: 0;
}

.nuda-accx-ict__panel {
  background: #141414;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 0 0 10px 10px;
  padding: .55rem .6rem;
  animation: _nuda-accxict-fade .2s ease-out;
}

.nuda-accx-ict__items {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.nuda-accx-ict__item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .45rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}

.nuda-accx-ict__star {
  color: #e4ff54;
  font-size: .7rem;
  flex-shrink: 0;
}

.nuda-accx-ict__info {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  flex: 1;
  min-width: 0;
}

.nuda-accx-ict__ititle {
  color: #cfcfcf;
  font-size: .6rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nuda-accx-ict__isub {
  color: #555;
  font-size: .52rem;
}

.nuda-accx-ict__badge {
  background: rgba(228,255,84,.15);
  color: #e4ff54;
  font-size: .5rem;
  font-weight: 700;
  padding: .1rem .3rem;
  border-radius: 4px;
  flex-shrink: 0;
}

@keyframes _nuda-accxict-fade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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