Navigation Tab System

<div class="bg-transparent border-b border-white/10">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');.tab-btn.active{color:white;}.tab-btn.active .tab-indicator{background:linear-gradient(to right,#10b981,#059669);box-shadow:0 0 10px rgba(16,185,129,0.5);transform:scaleX(1);}.tab-btn:not(.active) .tab-indicator{background:rgba(255,255,255,0.2);transform:scaleX(0);transition:transform 0.2s ease;}.tab-btn:not(.active):hover .tab-indicator{transform:scaleX(1);}
  </style>
  <div class="px-6 sm:px-8 lg:px-10">
    <div class="flex items-center gap-8 text-sm" id="tabContainer">
      <button class="tab-btn active relative pb-4 font-medium transition-colors group" data-tab="performance">
        <span class="font-[Inter]">Channel Performance</span>
        <span class="tab-indicator absolute -bottom-[1px] left-0 right-0 h-[2px] rounded-full bg-gradient-to-r from-emerald-400 to-emerald-500 shadow-lg shadow-emerald-500/50"></span>
      </button>
      <button class="tab-btn pb-4 text-white/50 hover:text-white/80 transition-colors relative group" data-tab="campaign">
        <span class="font-[Inter]">Campaign Analysis</span>
        <span class="tab-indicator absolute -bottom-[1px] left-0 right-0 h-[2px] rounded-full bg-white/20 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </button>
      <button class="tab-btn pb-4 text-white/50 hover:text-white/80 transition-colors relative group" data-tab="attribution">
        <span class="font-[Inter]">Attribution Model</span>
        <span class="tab-indicator absolute -bottom-[1px] left-0 right-0 h-[2px] rounded-full bg-white/20 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </button>
      <button class="tab-btn pb-4 text-white/50 hover:text-white/80 transition-colors relative group" data-tab="cohort">
        <span class="font-[Inter]">Cohort Analysis</span>
        <span class="tab-indicator absolute -bottom-[1px] left-0 right-0 h-[2px] rounded-full bg-white/20 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </button>
    </div>
  </div>
  <script>
    document.querySelectorAll('.tab-btn').forEach(btn=>{btn.addEventListener('click',(e)=>{const tabName=e.target.closest('.tab-btn').dataset.tab;document.querySelectorAll('.tab-btn').forEach(b=>{b.classList.remove('active');b.classList.add('text-white/50');b.classList.remove('text-white');});e.target.closest('.tab-btn').classList.add('active');e.target.closest('.tab-btn').classList.remove('text-white/50');e.target.closest('.tab-btn').classList.add('text-white');});});
  </script>
</div>