A complex, 3D-inspired responsive mega menu for a dashboard. It uses a triadic color scheme, supports dark mode, and features multiple interactive sections for data visualization and control panels.
<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>
