Tabbed Code Viewer with Run Button

<div class="w-full max-w-lg ring-1 ring-white/10 bg-gradient-to-b from-slate-900/60 to-slate-900/30 rounded-2xl mt-3 mr-auto ml-auto pt-3 pr-3 pb-3 pl-3 backdrop-blur">
  <!-- File tabs -->
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-1">
      <button data-tab="signup" class="tab-btn rounded-md px-2.5 py-1.5 text-xs text-slate-300 hover:bg-white/5">Register.tsx</button>
      <button data-tab="signin" class="tab-btn rounded-md px-2.5 py-1.5 text-xs text-slate-300 hover:bg-white/5">Login.tsx</button>
      <button data-tab="userbtn" class="tab-btn rounded-md px-2.5 py-1.5 text-xs text-slate-300 hover:bg-white/5">UserMenu.tsx</button>
      <button data-tab="profile" class="tab-btn rounded-md px-2.5 py-1.5 text-xs text-slate-300 hover:bg-white/5">Profile.tsx</button>
    </div>
    <button id="runBtn" class="inline-flex items-center gap-2 rounded-md bg-white/10 px-2.5 py-1.5 text-xs text-white ring-1 ring-white/10 hover:bg-white/15">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]" data-lucide="play" style="width: 14px; height: 14px; color: rgb(255, 255, 255);"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
      Run code
    </button>
  </div>

  <!-- Code window -->
  <div class="mt-2 overflow-hidden rounded-xl border border-white/10 bg-slate-950">
    <div class="flex items-center gap-1 border-b border-white/10 px-3 py-2">
      <span class="h-2.5 w-2.5 rounded-full bg-rose-500/70"></span>
      <span class="h-2.5 w-2.5 rounded-full bg-amber-400/70"></span>
      <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/70"></span>
      <span class="ml-3 text-[11px] text-slate-400" id="codeTitle">React • Register.tsx</span>
    </div>
    <pre class="max-h-72 overflow-auto p-4 text-[12px] leading-relaxed text-slate-200"><code id="codeBlock" class="font-mono" style="animation: none;"><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.05s;">m</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.1s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.15s;">o</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.2s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.25s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.3s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.35s;">{</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.4s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.45s;">S</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.5s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.55s;">g</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.6s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.65s;">U</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.7s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.75s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.8s;">}</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.85s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.9s;">f</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 0.95s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1s;">o</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.05s;">m</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.1s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.15s;">'</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.2s;">@</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.25s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.3s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.35s;">b</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.4s;">u</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.45s;">l</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.5s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.55s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.6s;">d</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.65s;">/</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.7s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.75s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.8s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.85s;">c</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.9s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 1.95s;">'</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2s;">;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.05s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.1s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.15s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.2s;">x</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.25s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.3s;">o</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.35s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.4s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.45s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.5s;">d</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.55s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.6s;">f</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.65s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.7s;">u</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.75s;">l</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.8s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.85s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.9s;">f</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 2.95s;">u</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.05s;">c</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.1s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.15s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.2s;">o</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.25s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.3s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.35s;">P</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.4s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.45s;">g</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.5s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.55s;">(</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.6s;">)</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.65s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.7s;">{</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.75s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.8s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.85s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.9s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 3.95s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.05s;">u</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.1s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.15s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.2s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.25s;">(</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.3s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.35s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.4s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.45s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.5s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.55s;">&amp;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.6s;">l</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.65s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.7s;">;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.75s;">S</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.8s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.85s;">g</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.9s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 4.95s;">U</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.05s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.1s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.15s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.2s;">d</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.25s;">i</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.3s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.35s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.4s;">c</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.45s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.5s;">T</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.55s;">o</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.6s;">=</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.65s;">"</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.7s;">/</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.75s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.8s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.85s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.9s;">"</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 5.95s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.05s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.1s;">p</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.15s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.2s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.25s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.3s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.35s;">n</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.4s;">c</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.45s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.5s;">=</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.55s;">{</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.6s;">{</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.65s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.7s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.75s;">h</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.8s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.85s;">m</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.9s;">e</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 6.95s;">:</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.05s;">'</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.1s;">d</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.15s;">a</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.2s;">r</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.25s;">k</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.3s;">'</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.35s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.4s;">}</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.45s;">}</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.5s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.55s;">/</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.6s;">&amp;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.65s;">g</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.7s;">t</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.75s;">;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.8s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.85s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.9s;"> </span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 7.95s;">)</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 8s;">;</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 8.05s;">
</span><span style="opacity: 0; animation: fadeIn 0.05s ease-in-out forwards; animation-delay: 8.1s;">}</span>

<style>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
    </code></pre>
  </div>
</div>