Componente Mega Menu

<nav class="relative bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 shadow-xl z-50 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-purple-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.79-7-4.34-7-8.93h2c0 3.86 3.14 7 7 7v2.93z" />
          </svg>
          <span class="text-white dark:text-purple-400 text-2xl font-bold ml-2">3D Dash</span>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="text-white dark:text-purple-400 hover:text-white dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:scale-105">
            <span class="relative z-10">Dashboard</span>
          </button>
          <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-6 w-screen max-w-4xl opacity-0 invisible group-hover:opacity-100 group-hover:visible translate-y-3 group-hover:translate-y-0 transition-all duration-300 ease-out transform pointer-events-none group-hover:pointer-events-auto bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 rounded-3xl shadow-2xl overflow-hidden pointer-events-auto ring-4 ring-indigo-300 dark:ring-gray-700 perspective-1000" style="transform-style: preserve-3d; backface-visibility: hidden;">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10">
              <!-- Background 3D Elements -->
              <div class="absolute inset-0 z-0 opacity-20">
                  <div class="absolute w-40 h-40 bg-purple-400/30 dark:bg-pink-400/30 rounded-full blur-3xl -left-10 -top-10 animate-pulse-slow"></div>
                  <div class="absolute w-60 h-60 bg-pink-400/30 dark:bg-yellow-400/30 rounded-full blur-3xl -right-20 -bottom-20 animate-pulse-slow animation-delay-700"></div>
                  <div class="absolute w-50 h-50 bg-indigo-400/30 dark:bg-indigo-400/30 rounded-full blur-3xl left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse-slow animation-delay-1400"></div>
              </div>
              <!-- Section 1: Overview -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-purple-300">Overview</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg> Live Analytics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6m-9-11V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-3a2 2 0 00-2-2z"></path></svg> Performance Metrics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M7 16h.01M13 16h.01M17 16h.01M7 21h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> Activity Log</a></li>
                </ul>
              </div>

              <!-- Section 2: Data Visualization -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-pink-300">Reports & Gauges</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l2 2 4-4M16 12h2m-6 3h6m-12 5h.01M12 12v.01M10 20h4a2 2 0 002-2V6a2 2 0 00-2-2H8a2 2 0 00-2 2v12a2 2 0 002 2zm12-7L4 4"></path></svg> Custom Reports</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path></svg> Trend Analysis</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h-6m6 4h-6m6 4h-6m4 0a3 3 0 11-6 0 3 3 0 016 0zM19 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Real-time Gauges</a></li>
                </ul>
              </div>

              <!-- Section 3: Quick Actions / Cards -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-yellow-300">Quick Actions</h3>
                <div class="space-y-3">
                  <a href="#" class="block p-3 rounded-lg bg-indigo-600/50 dark:bg-gray-600/50 hover:bg-indigo-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Add New Data Entry
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-pink-600/50 dark:bg-gray-600/50 hover:bg-pink-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><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"></path></svg>
                    View All Records
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-yellow-600/50 dark:bg-gray-600/50 hover:bg-yellow-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.515-1.077 1.485-1.077 2.001 0a2 2 0 011.879 1.442 2 2 0 001.972 1.879 2 2 0 011.442 1.879c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 011.442 1.879 2 2 0 001.972 1.879 2 2 0 011.879 1.442c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442c1.077-.515 1.077-1.485 0-2.001a2 2 0 01-1.442-1.879 2 2 0 00-1.972-1.879 2 2 0 01-1.879-1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442z"></path></svg>
                    Configure Settings
                  </a>
                </div>
              </div>
            </div>
            <!-- 3D Card at the bottom -->
             <div class="relative mt-8 p-4 rounded-xl bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-green-600 dark:to-teal-700 backdrop-filter backdrop-blur-sm shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out hover:scale-[1.02] hover:rotate-x-2 hover:rotate-y-2 hover:shadow-3xl" style="transform: translateZ(50px);">
                <div class="absolute inset-0 opacity-20">
                  <img src="https://picsum.photos/800/200?random=1" alt="Background pattern" class="w-full h-full object-cover" style="filter: brightness(0.4);"/>
                </div>
                <div class="relative z-10 flex items-center justify-between">
                  <div>
                    <h4 class="text-2xl font-extrabold text-white mb-1">Need Assistance?</h4>
                    <p class="text-sm text-blue-100 dark:text-green-100">Our support team is here to help you.</p>
                  </div>
                  <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200 transform hover:scale-105">
                    Contact Support
                    <svg class="ml-2 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                  </a>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-purple-200 dark:text-purple-400 hover:text-white hover:bg-purple-500 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-purple-400 transform transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute inset-x-0 top-16 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 pb-3 space-y-1 sm:px-3" id="mobile-menu">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Dashboard Overview</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Analytics</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Reports</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Settings</a>
  </div>
</nav>

<style>
  /* Adding custom styles for 3D rotation effects */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.4; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  .animation-delay-700 {
    animation-delay: 0.7s;
  }

  .animation-delay-1400 {
    animation-delay: 1.4s;
  }

  .perspective-1000 {
    perspective: 1000px; /* Defines the 3D viewing perspective */
  }

  .rotate-x-2:hover { transform: rotateX(2deg); }
  .rotate-y-2:hover { transform: rotateY(2deg); }
  .rotate-z-1:hover { transform: rotateZ(1deg); }
  .shadow-3xl { 
      box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4), 
                  0 30px 60px -30px rgba(0, 0, 0, 0.5), 
                  inset 0 -2px 6px 0 rgba(0, 0, 0, 0.3); 
  }
  /* Further refined styles for 3D interactions */
  .group:hover .group-hover\:translate-y-0 {
    transform: translateY(0) !important;
  }
  .group:hover .group-hover\:visible {
    visibility: visible !important;
  }
  .group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  .group:hover .group-hover\:pointer-events-auto {
    pointer-events: auto !important;
  }

  /* Ensure mobile menu can be toggled by JS. Tailwind doesn't handle interactive parts without JS. */
  /* For a pure HTML/CSS demo, the mobile menu would typically be activated by a :checked pseudo-class on a hidden checkbox, 
     but that's not standard for a mega menu and would be less semantic than a button with JS. 
     The provided HTML assumes a simple JS toggle for the 'hidden' class on the mobile-menu div and block/hidden on the SVG icons. */

</style>