ArtDecoTabsComponent （装饰标签组件）

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 md:p-8 lg:p-12">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-2xl overflow-hidden rounded-lg border-4 border-blue-800 dark:border-blue-500 transform skew-y-1 md:skew-y-0 duration-300 ease-in-out">
    <div class="p-6 md:p-8 lg:p-10 bg-blue-900 dark:bg-blue-950 text-white transform -skew-y-1 md:skew-y-0">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-['Playfair_Display'] font-bold text-center tracking-wider uppercase text-blue-100 dark:text-blue-50 drop-shadow-lg leading-tight">
        <span class="block">The Lumina Gallery</span>
        <span class="block text-xl sm:text-2xl lg:text-3xl font-light italic mt-2">A Lens to the Soul</span>
      </h2>
      <p class="text-blue-200 dark:text-blue-100 text-center mt-4 max-w-2xl mx-auto text-sm sm:text-base md:text-lg opacity-90">
        Explore curated collections and captivating moments through our Art Deco inspired visual journey.
      </p>
    </div>

    <div class="flex flex-col md:flex-row flex-wrap justify-center bg-blue-800 dark:bg-blue-900 py-3 md:py-4 border-b-2 border-blue-600 dark:border-blue-700 relative z-10">
      <input type="radio" name="tabs" id="tab-all" class="hidden" checked>
      <label for="tab-all" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        All Galleries
      </label>
      <input type="radio" name="tabs" id="tab-portraits" class="hidden">
      <label for="tab-portraits" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Portraits
      </label>
      <input type="radio" name="tabs" id="tab-landscapes" class="hidden">
      <label for="tab-landscapes" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Landscapes
      </label>
      <input type="radio" name="tabs" id="tab-conceptual" class="hidden">
      <label for="tab-conceptual" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Conceptual
      </label>

      <style>
        .tab-label:has(~ input[type="radio"]:checked) {
          background: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
          --tw-gradient-to: #172554 var(--tw-gradient-to-position);
          color: #bfdbfe; /* blue-200 */
          border-color: #60a5fa; /* blue-400 */
          transform: translateY(-4px) scale(1.02); /* Slight lift */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .dark .tab-label:has(~ input[type="radio"]:checked) {
          background: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: #0c0a09 var(--tw-gradient-from-position); /* stone-950 */
          --tw-gradient-to: #0f172a var(--tw-gradient-to-position); /* slate-900 */
          color: #bfdbfe; /* blue-200 */
          border-color: #60a5fa; /* blue-400 */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }
      </style>
    </div>

    <div class="tab-content px-4 py-8 md:px-8 md:py-10 bg-gray-50 dark:bg-gray-800 relative z-0">
      <div id="content-all" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">All Works Unified</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1018/600/400" alt="Forest Stream" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Whispers of the Wild</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Nature's symphony in a serene woodland setting.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1012/600/400" alt="Portrait of a woman" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Glimpse of Serenity</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">A captivating study of human emotion and light.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1043/600/400" alt="Geometric abstraction" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Abstract Reverie</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Lines and light weaving an intricate visual narrative.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1054/600/400" alt="City landscape at night" class="w-full h-48 object-cover object-bottom transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Urban Nocturne</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Vibrant cityscapes under the twilight's embrace.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-portraits" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Faces & Souls</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Portrait 1" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">The Gaze</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Deep connections through the eyes.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Portrait 2" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Reflections</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">A moment of quiet contemplation.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Portrait 3" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Vivid Spirit</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Capturing the essence of a vibrant personality.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-landscapes" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Vistas & Horizons</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1069/600/400" alt="Mountain range" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Peaks of Tranquility</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Majestic mountains under a clear sky.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1070/600/400" alt="Desert dunes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sand Dunes Echo</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Endless desert patterns carved by wind.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-conceptual" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Mind & Metaphor</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/292/600/400" alt="Abstract shapes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Geometric Serenity</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">The elegance of form and structure.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/296/600/400" alt="Minimalist architecture" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Silent Structures</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Architectural forms speaking volumes in silence.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('input[name="tabs"]').forEach(input => {
    input.addEventListener('change', (e) => {
      const targetId = `content-${e.target.id.split('-')[1]}`;
      document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.add('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
        pane.classList.remove('relative', 'opacity-100');
      });
      const activePane = document.getElementById(targetId);
      if (activePane) {
        activePane.classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
        activePane.classList.add('relative', 'opacity-100');
      }
    });
  });

  // Initial load to show the first tab
  document.querySelector('#tab-all').checked = true;
  document.getElementById('content-all').classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
  document.getElementById('content-all').classList.add('relative', 'opacity-100');
</script>