Gradient Underline Tab Navigation

<div class="flex justify-center">
      <div class="relative">
        <div class="inline-flex flex-wrap items-center gap-2 rounded-[24px] border border-white/10 bg-white/5 px-2.5 py-2">
          <!-- Tab 1 -->
          <button onclick="switchTab(0)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 ring-1 ring-white/20">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar h-3.5 w-3.5 text-white"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
            </span>
            <span>Meeting Assistant</span>
          </button>

          <!-- Tab 2 -->
          <button onclick="switchTab(1)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="git-branch" class="lucide lucide-git-branch h-3.5 w-3.5 text-white/80"><line x1="6" x2="6" y1="3" y2="15" class=""></line><circle cx="18" cy="6" r="3" class=""></circle><circle cx="6" cy="18" r="3" class=""></circle><path d="M18 9a9 9 0 0 1-9 9" class=""></path></svg>
            </span>
            <span class="">Scheduler &amp; Lead Router</span>
          </button>

          <!-- Tab 3 -->
          <button onclick="switchTab(2)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox=" fill=" none"="" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data"="" class="lucide lucide-brain h-3.5 w-3.5 text-white/80"><path d="M12 18V5" class=""></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" class=""></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" class=""></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" class=""></path><path d="M18 18a4 4 0 0 0 2-7.464" class=""></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" class=""></path><path d="M6 18a4 4 0 0 1-2-7.464" class=""></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" class=""></path></svg>
            </span>
            <span class="">Conversation Insights</span>
          </button>

          <!-- Tab 4 -->
          <button onclick="switchTab(3)" class="tab-button relative inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80 hover:text-white hover:bg-white/10 transition">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/15">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5 text-white/80"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
            </span>
            <span class="">Revenue Performance</span>
          </button>
        </div>
        
        <!-- Animated gradient line -->
        <div id="gradient-line" class="pointer-events-none absolute -bottom-2 h-0.5 rounded-full transition-all duration-300 ease-out" style="background: linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 0.8) 25%, rgba(217, 70, 239, 0.8) 75%, rgba(217, 70, 239, 0) 100%); left: 23px; width: 158.32px;"></div>
        
        <div class="pointer-events-none absolute left-0 right-0 -bottom-2 h-px" style="background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(148,163,184,.15) 20%, rgba(148,163,184,.15) 80%, rgba(255,255,255,0) 100%);"></div>
      </div>
      
      <script>
        function switchTab(index) {
          const buttons = document.querySelectorAll('.tab-button');
          const line = document.getElementById('gradient-line');
          
          // Update button styles
          buttons.forEach((btn, i) => {
            const iconSpan = btn.querySelector('span:first-child');
            if (i === index) {
              btn.classList.remove('bg-white/5', 'text-white/80');
              btn.classList.add('bg-white/10', 'text-white/90');
              iconSpan.classList.remove('bg-white/5', 'ring-white/15');
              iconSpan.classList.add('bg-gradient-to-br', 'from-indigo-500', 'to-violet-500', 'ring-white/20');
            } else {
              btn.classList.remove('bg-white/10', 'text-white/90');
              btn.classList.add('bg-white/5', 'text-white/80');
              iconSpan.classList.remove('bg-gradient-to-br', 'from-indigo-500', 'to-violet-500', 'ring-white/20');
              iconSpan.classList.add('bg-white/5', 'ring-white/15');
            }
          });
          
          // Calculate position and width for gradient line
          const activeButton = buttons[index];
          const container = activeButton.parentElement;
          const containerRect = container.getBoundingClientRect();
          const buttonRect = activeButton.getBoundingClientRect();
          
          const left = buttonRect.left - containerRect.left + 12;
          const width = buttonRect.width - 24;
          
          line.style.left = left + 'px';
          line.style.width = width + 'px';
        }
        
        // Initialize on load
        if (typeof window !== 'undefined') {
          window.addEventListener('load', () => {
            switchTab(0);
          });
        }
      </script>
    </div>