@page "/tabs1"
@{
    ViewData["Title"] = "Tabs 1";
}
@{
    ViewData["SidebarVariant"] = "1";
    ViewData["Css:tabs-page.css"] = "css/tabs-page.css";
    ViewData["Js:tabs.js"] = "js/tabs.js";

}

<div class="p-4 md:p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
                    <p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
                </div>
                <div class="flex items-center gap-2">
                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
                        <option selected>All Sections</option>
                        <option>Underline Tabs</option>
                        <option>Pill Tabs</option>
                        <option>Vertical Tabs</option>
                        <option>Card Tabs</option>
                        <option>Animated Tabs</option>
                    </select>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p>
                    </div>
                </div>
                <div class="border border-gray-100 rounded-xl overflow-hidden">
                    <div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
                        <button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
                        <button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
                        <button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
                        <button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
                    </div>
                    <div class="p-5">
                        <div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content">
                            <div class="space-y-4">
                                <div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div>
                                <div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div>
                                <div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div>
                            </div>
                        </div>
                        <div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
                        <div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
                        <div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900">Pill Tabs</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p>
                    </div>
                </div>
                <div class="border border-gray-100 rounded-xl overflow-hidden p-4">
                    <div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
                        <button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
                        <button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
                        <button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
                        <button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
                        <button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
                    </div>
                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full">
                            <div class="space-y-3">
                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
                                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
                            </div>
                        </div>
                        <div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                        <div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                        <div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                        <div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900">Vertical Tabs</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p>
                    </div>
                </div>
                <div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
                    <div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
                        <div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
                            <button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
                            <button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
                            <button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
                            <button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
                        </div>
                    </div>
                    <div class="flex-1 p-5">
                        <div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
                        <div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
                        <div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
                        <div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900">Card Tabs</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
                        <button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')">
                            <div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div>
                            <div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div>
                        </button>
                        <button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')">
                            <div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
                            <div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div>
                        </button>
                        <button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')">
                            <div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div>
                            <div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div>
                        </button>
                        <button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')">
                            <div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
                            <div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div>
                        </button>
                    </div>
                    <div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
                        <div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
                        <div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
                        <div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
                        <div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900">Animated Tabs</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p>
                    </div>
                </div>
                <div class="border border-gray-100 rounded-xl overflow-hidden">
                    <div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
                        <div role="tablist" class="flex items-end gap-0" id="tablistA1">
                            <button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
                            <button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
                            <button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
                            <div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
                        </div>
                    </div>
                    <div class="p-5">
                        <div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
                        <div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
                        <div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
                    </div>
                </div>
            </div>
        </div>