All Components

                <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>
              

                <div class="flex h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-mono text-stone-800 dark:text-stone-200 overflow-hidden">

  <!-- Sidebar for larger screens -->
  <aside class="w-64 flex-shrink-0 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 hidden md:flex flex-col shadow-lg">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006zM18 10a1 1 0 00-1-1h-.06l-.004-.002-.016-.007a1 1 0 00-.065.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Mobile/Tablet Top Nav (hidden on desktop) -->
  <header class="md:hidden fixed top-0 left-0 w-full bg-stone-50 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 p-4 flex justify-between items-center z-10 shadow-lg">
    <h1 class="text-2xl font-bold tracking-wider text-stone-900 dark:text-stone-50">Neon Estate</h1>
    <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 rounded-md p-1">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </header>

  <!-- Mobile/Tablet Sidebar Overlay (hidden by default) -->
  <div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>

  <aside id="mobile-sidebar" class="fixed top-0 left-0 h-full w-64 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 transform -translate-x-full transition-transform duration-300 ease-in-out z-30 md:hidden shadow-xl">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration, just a placeholder) -->
  <main class="flex-1 p-8 pt-20 md:pt-8 overflow-y-auto">
    <h2 class="text-4xl font-bold text-stone-900 dark:text-stone-50 mb-6 drop-shadow-lg">Welcome, John!</h2>
    <p class="mb-8 text-stone-700 dark:text-stone-300 max-w-2xl">Here's a quick overview of your real estate dashboard. Explore properties, manage clients, and track messages.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Total Listings</h3>
        <p class="text-4xl font-bold text-stone-600 dark:text-stone-400">1,234</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">New Inquiries</h3>
        <p class="text-4xl font-bold text-teal-600 dark:text-teal-400">42</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Pending Sales</h3>
        <p class="text-4xl font-bold text-orange-600 dark:text-orange-400">15</p>
      </div>
    </div>
  </main>

  <script>
    // Basic JavaScript for mobile sidebar toggle
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.getElementById('mobile-menu-button');
      const mobileSidebar = document.getElementById('mobile-sidebar');
      const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');

      mobileMenuButton.addEventListener('click', () => {
        mobileSidebar.classList.toggle('-translate-x-full');
        mobileSidebarOverlay.classList.toggle('hidden');
      });

      mobileSidebarOverlay.addEventListener('click', () => {
        mobileSidebar.classList.add('-translate-x-full');
        mobileSidebarOverlay.classList.add('hidden');
      });

      // Close sidebar if screen resized to desktop
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) { // md breakpoint
          mobileSidebar.classList.add('-translate-x-full');
          mobileSidebarOverlay.classList.add('hidden');
        }
      });
    });
  </script>
</div>
              

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
  <!-- Mobile / Tablet Overlay -->
  <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-gradient-to-br from-yellow-700 to-yellow-900 dark:from-gray-800 dark:to-gray-900 text-white transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 shadow-xl border-r border-yellow-800 dark:border-gray-700 overflow-y-auto overflow-x-hidden flex flex-col pt-6 pb-4">
    <!-- Sidebar Header (3D Effect) -->
    <div class="p-4 mb-8 relative">
      <div class="absolute inset-0 bg-yellow-900 bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg transform rotate-[-2deg] scale-105 shadow-inner"></div>
      <div class="relative flex items-center justify-center p-2 bg-yellow-800 dark:bg-gray-800 rounded-lg transform translate-y-0.5 translate-x-0.5 shadow-md border border-yellow-700 dark:border-gray-700">
        <img src="https://picsum.photos/40/40?random=1" alt="Non-Profit Logo" class="rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
        <h1 class="text-2xl font-extrabold tracking-wide text-white drop-shadow-lg">Hope Nexus</h1>
      </div>
    </div>

    <!-- Navigation -->
    <nav class="flex-grow space-y-2 px-4">
      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
            </path>
          </svg>
          <span class="font-semibold">Dashboard</span>
          <span class="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-gray-700 text-yellow-100 dark:text-gray-300">New</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.493m0-13.493V6.253a4.5 4.5 0 100 9v0M12 6.253C12 5.094 13.921 5 15 5h1a2 2 0 012 2v2M12 6.253a4.5 4.5 0 010 9v0m0 0C12 18.906 10.079 19 9 19H8a2 2 0 01-2-2v-2m6-10V6.253m0 0a4.5 4.5 0 00-4.5 4.5v0m4.5-4.5a4.5 4.5 0 014.5 4.5v0">
            </path>
          </svg>
          <span class="font-semibold">Campaigns</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z">
            </path>
          </svg>
          <span class="font-semibold">Donations</span>
          <span class="group-hover:animate-ping absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
          <span class="absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-500"></span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
          <span class="font-semibold">Volunteers</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
            </path>
          </svg>
          <span class="font-semibold">Settings</span>
        </div>
      </a>
    </nav>

    <!-- User Profile (Bottom) -->
    <div class="mt-auto p-4">
      <div class="p-3 rounded-xl bg-yellow-800 dark:bg-gray-800 border border-yellow-700 dark:border-gray-700 shadow-lg relative perspective-1000">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-700/20 rounded-xl transform rotate-[2deg] scale-105 shadow-inner"></div>
        <div class="relative flex items-center">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
            <div>
                <p class="font-semibold text-sm text-white">Jane Doe</p>
                <p class="text-xs text-yellow-200 dark:text-gray-400">Administrator</p>
            </div>
            <button class="ml-auto p-2 rounded-full hover:bg-yellow-700 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-gray-500">
                <svg class="w-5 h-5 text-yellow-300 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 9h5a2 2 0 002-2V7a2 2 0 00-2-2h-5">
                    </path>
                </svg>
            </button>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content (for demonstration, includes toggle button) -->
  <main class="flex-1 p-6 lg:ml-64 transition-all duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Main Content Area</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6">This is where your main application content would go. The sidebar is fully responsive.</p>
      <div class="flex items-center space-x-4 mb-6">
        <button id="sidebar-toggle" class="lg:hidden p-3 rounded-lg bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        <button id="dark-mode-toggle" class="lg:hidden p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>

        <button id="desktop-dark-mode-toggle" class="hidden lg:block p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Resize your browser to see responsiveness. Click the menu icon on smaller screens.</p>
    </div>
  </main>
</div>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggleDesktop = document.getElementById('desktop-dark-mode-toggle');
  const darkModeToggleMobile = document.getElementById('dark-mode-toggle');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  }

  darkModeToggleDesktop.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });
  darkModeToggleMobile.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Sidebar Toggle Logic
  const sidebar = document.getElementById('sidebar');
  const sidebarOverlay = document.getElementById('sidebar-overlay');
  const sidebarToggle = document.getElementById('sidebar-toggle');

  const toggleSidebar = () => {
    sidebar.classList.toggle('-translate-x-full');
    sidebarOverlay.classList.toggle('hidden');
  };

  sidebarToggle.addEventListener('click', toggleSidebar);
  sidebarOverlay.addEventListener('click', toggleSidebar);

  // Close sidebar on larger screens if it was open on mobile
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) { // Tailwind's 'lg' breakpoint
      if (!sidebar.classList.contains('lg:translate-x-0')) {
        sidebar.classList.remove('-translate-x-full'); // Ensure it's shown
        sidebar.classList.add('lg:translate-x-0');
      }
      sidebarOverlay.classList.add('hidden'); // Ensure overlay is hidden on desktop
    }
  });
</script>
              

                <div class="p-4 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:shadow-2xl dark:shadow-md">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400">I'm not a robot</h2>
        <div class="w-12 h-12 flex items-center justify-center bg-gradient-to-br from-pink-400 to-purple-500 rounded-full shadow-lg">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row items-center gap-4">
        <div class="flex-shrink-0">
          <button type="button" class="w-24 h-24 sm:w-28 sm:h-28 bg-white dark:bg-gray-700 border-4 border-pink-300 dark:border-pink-500 rounded-lg shadow-inner flex items-center justify-center focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-600 transition duration-200 ease-in-out transform active:scale-95">
            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-mint-green-300 dark:bg-mint-green-500 rounded-md shadow-md"></div>
          </button>
        </div>
        <div class="flex-grow text-gray-700 dark:text-gray-300">
          <p class="text-sm text-center sm:text-left">Please click the checkbox to confirm you are not a robot.</p>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-center sm:text-left">This helps protect our event from spam and abuse.</p>
        </div>
      </div>

      <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
        <a href="#" class="text-xs text-mint-green-600 dark:text-mint-green-400 hover:underline transition duration-200">
          Privacy & Terms
        </a>
      </div>
    </div>
  </div>
  <style>
    /* Custom 'Mint Green' color for demonstration, you can extend your tailwind.config.js */
    .bg-mint-green-300 {
      background-color: #A7F0C7; /* A lighter, cheerful mint */
    }
    .dark\:bg-mint-green-500 {
      background-color: #6EE7B7; /* A slightly darker mint for dark mode */
    }
    .text-mint-green-600 {
      color: #059669; /* A vivid mint green */
    }
    .dark\:text-mint-green-400 {
      color: #34D399; /* A brighter mint green for dark mode */
    }
  </style>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="w-full max-w-sm rounded-xl overflow-hidden shadow-lg p-6 bg-white dark:bg-gray-800 transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="relative pb-2/3 rounded-lg overflow-hidden mb-4">
      <img class="absolute h-full w-full object-cover" src="https://picsum.photos/400/300?random=1" alt="Profile image">
      <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 opacity-25"></div>
    </div>
    <div class="text-center">
      <div class="relative inline-block mb-4 -mt-16">
        <img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 object-cover transform transition-all duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <span class="absolute bottom-1 right-1 block h-4 w-4 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-400"></span>
      </div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1 leading-tight">
        Jane Doe
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
        28, New York
      </p>
      <div class="flex justify-center space-x-2 text-sm mb-4">
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-purple-500 to-indigo-500">Travel</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-indigo-500 to-blue-500">Art</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-blue-500 to-teal-500">Music</span>
      </div>
      <button class="w-full py-3 rounded-lg text-white font-semibold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:from-pink-600 hover:via-red-600 hover:to-yellow-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all duration-300 ease-in-out">
        Connect
      </button>
    </div>
  </div>
</div>
              

                <header class="w-full sticky top-0 z-50 transition-all duration-300 backdrop-blur-sm bg-gradient-to-r from-orange-600/80 to-red-700/80 dark:from-gray-900/90 dark:to-black/90 shadow-lg dark:shadow-xl dark:shadow-fuchsia-700/30">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-yellow-300 dark:text-fuchsia-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121a3 3 0 114.243 4.243L14.828 20.97a4 4 0 01-5.656 0L4.121 16.879a3 3 0 014.243-4.243m.86-10.428e-5L12 5m-2 4a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <a href="#" class="text-2xl font-extrabold text-white tracking-widest uppercase filter drop-shadow-md text-shadow-neon-orange dark:text-fuchsia-400 dark:text-shadow-neon-purple">SynthBank</a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Investments
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Loans
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Support
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-yellow-300 text-orange-800 hover:bg-yellow-400 transition-colors duration-300 dark:bg-fuchsia-600 dark:text-white dark:hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-orange-600 dark:focus:ring-fuchsia-500 dark:focus:ring-offset-gray-900">
        <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 01d 3v1" />
        </svg>
      </button>
      <button class="md:hidden p-2 rounded-md text-white hover:bg-white/10 transition-colors duration-300 dark:text-fuchsia-300 dark:hover:bg-fuchsia-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:focus:ring-fuchsia-500">
        <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="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div class="md:hidden origin-top transition-all duration-300 ease-out max-h-0 overflow-hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-start">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Investments</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Loans</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Support</a>
    </div>
  </div>
</header>

<style>
  /* This is a simple CSS workaround for the neon text effect if not using a utility class */
  /* For a more robust solution, consider a custom Tailwind plugin for text-shadow-neon */
  .text-shadow-neon-orange {
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.7),
                 0 0 10px rgba(255, 165, 0, 0.5),
                 0 0 20px rgba(255, 165, 0, 0.3);
  }
  .dark .text-shadow-neon-purple {
    text-shadow: 0 0 5px rgba(220, 38, 203, 0.7),
                 0 0 10px rgba(236, 72, 153, 0.5),
                 0 0 20px rgba(244, 114, 182, 0.3);
  }
</style>

<script>
  // Basic JavaScript for mobile menu toggle (required for interactive features).
  // Tailwind CSS alone cannot handle toggling classes based on user interaction directly.
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', !isExpanded);
        if (isExpanded) {
          mobileMenu.style.maxHeight = '0px';
        } else {
          mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
        }
      });
    }
  });
</script>
              

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Event Sessions
      <!-- Heroicon name: solid/chevron-down -->
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto py-8 sm:py-12 bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 text-gray-900 dark:text-gray-50 border-b-4 border-yellow-500 dark:border-yellow-400 pb-2 inline-block mx-auto">
      Your Appointment Timeline
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-6">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col items-center text-center group">
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:rotate-6">
          <svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-yellow-500 dark:bg-yellow-400 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
            <span class="font-bold text-white text-sm sm:text-base">1</span>
          </div>
        </div>
        <h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Select Date & Time</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300">Choose your preferred slot that fits your schedule.</p>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col items-center text-center group">
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-yellow-500 dark:bg-yellow-400 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:-rotate-6">
          <svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          <div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-red-500 dark:bg-red-400 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
            <span class="font-bold text-white text-sm sm:text-base">2</span>
          </div>
        </div>
        <h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Provide Details</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300">Fill out necessary information for your booking.</p>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col items-center text-center group">
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 bg-red-500 dark:bg-red-400 rounded-full flex items-center justify-center mb-4 transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:rotate-6">
          <svg class="w-12 h-12 sm:w-14 sm:h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          <div class="absolute -bottom-2 -right-2 w-8 h-8 sm:w-10 sm:h-10 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800">
            <span class="font-bold text-white text-sm sm:text-base">3</span>
          </div>
        </div>
        <h3 class="text-lg sm:text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">Confirm & Book</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300">Review your booking and confirm to finalize it.</p>
      </div>

    </div>

    <div class="mt-10 pt-6 border-t-2 border-dashed border-gray-300 dark:border-gray-700 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Start Your Booking
        <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
        </svg>
      </a>
    </div>

  </div>
</div>
              

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
    <!-- Tabs Navigation -->
    <div class="flex-none w-full md:w-56 bg-emerald-700 dark:bg-emerald-900 rounded-lg p-2 shadow-inner">
      <nav class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-2" role="tablist">
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="true"
          data-state="active"
          tabindex="0"
          id="tab-1"
          aria-controls="panel-1"
        >
          Strategic Planning
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-2"
          aria-controls="panel-2"
        >
          Market Analysis
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-3"
          aria-controls="panel-3"
        >
          Financial Advisory
        </button>
      </nav>
    </div>

    <!-- Tabs Content -->
    <div class="flex-auto bg-gray-50 dark:bg-gray-800 rounded-lg p-6 shadow-md text-gray-800 dark:text-gray-200">
      <div
        role="tabpanel"
        id="panel-1"
        aria-labelledby="tab-1"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden"
        data-state="active"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Strategic Planning Excellence</h3>
        <p class="text-lg leading-relaxed">
          Our expert consultants work closely with your leadership to develop robust, forward-thinking strategies that propel your organization toward its long-term goals. We combine in-depth analysis with actionable insights to create a roadmap for sustainable growth and competitive advantage.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Vision & Mission Alignment</li>
          <li>Goal Setting & KPI Development</li>
          <li>Resource Allocation Optimization</li>
          <li>Risk Assessment & Mitigation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=1" alt="Strategic Planning Meeting" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-2"
        aria-labelledby="tab-2"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">In-Depth Market Analysis</h3>
        <p class="text-lg leading-relaxed">
          Gain a comprehensive understanding of your market landscape, customer behaviors, and competitor strategies. Our detailed market analysis provides the intelligence you need to identify new opportunities, mitigate threats, and make informed business decisions.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Competitor Benchmarking</li>
          <li>Customer Segmentation & Insights</li>
          <li>Industry Trend Forecasting</li>
          <li>SWOT Analysis</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=2" alt="Market Analysis Charts" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-3"
        aria-labelledby="tab-3"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Robust Financial Advisory</h3>
        <p class="text-lg leading-relaxed">
          Secure your financial future with our expert advisory services. From capital management to investment strategies and risk management, we provide tailored financial guidance designed to optimize your financial health and achieve your fiscal objectives.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Investment Strategy Development</li>
          <li>Capital Structure Optimization</li>
          <li>Mergers & Acquisitions Support</li>
          <li>Due Diligence & Valuation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=3" alt="Financial Advisory Chart" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('[role="tab"]');
    const tabPanels = document.querySelectorAll('[role="tabpanel"]');

    tabs.forEach(tab => {
      tab.addEventListener('click', (e) => {
        const targetId = e.currentTarget.id;
        const targetPanelId = e.currentTarget.getAttribute('aria-controls');

        // Deactivate all tabs and hide all panels
        tabs.forEach(t => {
          t.setAttribute('aria-selected', 'false');
          t.setAttribute('tabindex', '-1');
          t.dataset.state = 'inactive';
        });
        tabPanels.forEach(p => {
          p.dataset.state = 'inactive';
          p.classList.add('hidden');
        });

        // Activate the clicked tab and show its panel
        e.currentTarget.setAttribute('aria-selected', 'true');
        e.currentTarget.setAttribute('tabindex', '0');
        e.currentTarget.dataset.state = 'active';
        document.getElementById(targetPanelId).dataset.state = 'active';
        document.getElementById(targetPanelId).classList.remove('hidden');
      });
    });
  });
</script>
              

                <div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden
              border-l-8 border-r-8 border-teal-500 dark:border-teal-400
              grid grid-cols-1 md:grid-cols-2 gap-0">

    <!-- Left Section: Video Embed / Image Placeholder -->
    <div class="relative bg-zinc-200 dark:bg-zinc-950 aspect-video md:aspect-auto md:h-full overflow-hidden flex items-center justify-center">
      <!-- Placeholder for Video Embed (e.g., YouTube iframe) -->
      <!-- For demonstration, using an image. In a real app, replace with iframe. -->
      <img src="https://picsum.photos/800/600?random=1" alt="Sports action highlight" class="w-full h-full object-cover opacity-90">
      <div class="absolute inset-0 bg-gradient-to-t from-teal-600/50 to-purple-600/50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-white/20 hover:bg-white/30 text-white transition-all transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-white/40">
          <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Right Section: Details and Call to Action -->
    <div class="p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-xs font-bold uppercase tracking-widest text-teal-600 dark:text-teal-400 mb-2">
          Match Highlights
        </h3>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-zinc-900 dark:text-white leading-tight mb-4">
          Unstoppable Victory: <span class="text-purple-600 dark:text-purple-400">Championship Decider!</span>
        </h2>
        <p class="text-zinc-600 dark:text-zinc-300 text-sm sm:text-base leading-relaxed mb-6">
          Relive the most exciting moments from the final match of the season. Featuring incredible plays, game-winning shots, and emotional celebrations. Don't miss a second!
        </p>

        <div class="flex items-center space-x-4 mb-6">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Coach Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-400">
          <div>
            <p class="text-zinc-900 dark:text-white font-semibold text-lg">Coach Marcus "The General" Reed</p>
            <p class="text-zinc-500 dark:text-zinc-400 text-sm">Team Strategist & Analyst</p>
          </div>
        </div>
      </div>

      <div class="mt-8 md:mt-0">
        <p class="text-zinc-500 dark:text-zinc-400 text-xs sm:text-sm font-medium uppercase tracking-wider mb-3">
          Aired: September 28, 2023 | Runtime: 12:35
        </p>
        <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-3 rounded-lg
           bg-gradient-to-r from-teal-500 to-purple-600 text-white text-lg font-bold uppercase tracking-wide
           shadow-lg shadow-purple-500/30 dark:shadow-purple-700/40
           hover:from-teal-600 hover:to-purple-700
           transform hover:-translate-y-1 transition-all duration-300 ease-in-out
           focus:outline-none focus:ring-4 focus:ring-purple-500/50">
          <svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
          </svg>
          Watch Full Match Replay
        </a>
      </div>
    </div>

  </div>
</div>