Bordered Tab Card

<div class="nuda-accx-btc">
  <div class="nuda-accx-btc__tabs" role="tablist">
    <button class="nuda-accx-btc__tab nuda-accx-btc__tab--active" role="tab" aria-selected="true">Code</button>
    <button class="nuda-accx-btc__tab" role="tab" aria-selected="false">Preview</button>
    <button class="nuda-accx-btc__tab" role="tab" aria-selected="false">Docs</button>
  </div>
  <div class="nuda-accx-btc__card" role="tabpanel">
    <div class="nuda-accx-btc__toolbar">
      <span class="nuda-accx-btc__dot nuda-accx-btc__dot--r"></span>
      <span class="nuda-accx-btc__dot nuda-accx-btc__dot--y"></span>
      <span class="nuda-accx-btc__dot nuda-accx-btc__dot--g"></span>
      <span class="nuda-accx-btc__fname">index.tsx</span>
    </div>
    <div class="nuda-accx-btc__code">
      <span class="nuda-accx-btc__kw">const</span>
      <span class="nuda-accx-btc__var"> App</span>
      <span class="nuda-accx-btc__op"> = </span>
      <span class="nuda-accx-btc__fn">() =&gt; </span>
      <span class="nuda-accx-btc__br">{</span>
    </div>
    <div class="nuda-accx-btc__code nuda-accx-btc__code--indent">
      <span class="nuda-accx-btc__kw">return</span>
      <span class="nuda-accx-btc__str"> &lt;div /&gt;</span>
    </div>
    <div class="nuda-accx-btc__code">
      <span class="nuda-accx-btc__br">}</span>
    </div>
  </div>
</div>

.nuda-accx-btc {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nuda-accx-btc__tabs {
  display: flex;
  gap: 0;
}

.nuda-accx-btc__tab {
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  padding: .35rem .6rem;
  font-size: .6rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-right: 2px;
  position: relative;
  top: 1px;
}

.nuda-accx-btc__tab--active {
  background: #141414;
  color: #fafafa;
  border-color: rgba(255,255,255,.1);
  z-index: 1;
}

.nuda-accx-btc__card {
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0 10px 10px 10px;
  overflow: hidden;
  animation: _nuda-accxbtc-reveal .25s ease-out;
}

.nuda-accx-btc__toolbar {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .55rem;
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.nuda-accx-btc__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nuda-accx-btc__dot--r {
  background: #ff6b6b;
}

.nuda-accx-btc__dot--y {
  background: #ffd93d;
}

.nuda-accx-btc__dot--g {
  background: #6bcb77;
}

.nuda-accx-btc__fname {
  color: #555;
  font-size: .55rem;
  margin-left: .2rem;
  font-family: monospace;
}

.nuda-accx-btc__code {
  padding: .15rem .55rem;
  font-size: .6rem;
  font-family: monospace;
  line-height: 1.7;
}

.nuda-accx-btc__code--indent {
  padding-left: 1.2rem;
}

.nuda-accx-btc__kw {
  color: #c678dd;
}

.nuda-accx-btc__var {
  color: #e06c75;
}

.nuda-accx-btc__op {
  color: #abb2bf;
}

.nuda-accx-btc__fn {
  color: #61afef;
}

.nuda-accx-btc__br {
  color: #abb2bf;
}

.nuda-accx-btc__str {
  color: #98c379;
}

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

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