Composant Mega Menu
Un composant de méga menu complexe et réactif conçu avec une esthétique monospace/développeur et une palette de couleurs neutres chaudes, adapté aux sites Web de conseil/services professionnels. Inclut la prise en charge du mode sombre.
HTML Code
<nav class="bg-gray-100 font-mono tracking-tighter shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between items-center">
<div class="flex items-center">
<div class="flex-shrink-0">
<a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold uppercase"><span class="text-orange-500">[</span>DEV<span class="text-orange-500">]</span>CONSULT</a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center">
<button type="button" class="relative rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<div class="relative ml-3 group">
<div>
<button type="button" class="relative flex rounded-full bg-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:focus:ring-offset-gray-900" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</button>
</div>
<!-- Dropdown menu, show/hide based on menu state. -->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden group-hover:block" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-200 p-2 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Main Navigation Links -->
<div class="hidden md:block py-4">
<div class="flex space-x-8">
<div class="group relative">
<button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SERVICES]</button>
<div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-5xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> E-commerce Platforms</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Government & Public Sector</a></li>
</ul>
</div>
<div class="bg-gray-100 p-4 rounded-md dark:bg-gray-700">
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// FEATURED RESOURCE</h3>
<img class="mt-4 w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Featured Resource">
<p class="mt-2 text-sm text-gray-700 dark:text-gray-300">'Mastering Kubernetes: A Developer's Guide to Container Orchestration.' Dive deep into scalable deployments.</p>
<a href="#" class="mt-3 inline-flex items-center text-sm font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">READ_DOCS() <span aria-hidden="true"> →</span></a>
</div>
</div>
</div>
</div>
<div class="group relative">
<button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SOLUTIONS]</button>
<div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-2xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</h3>
<ul class="mt-4 space-y-2">
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a></li>
<li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a></li>
</ul>
</div>
</div>
</div>
</div>
<a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.ABOUT_US]</a>
<a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.BLOG]</a>
<a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.CONTACT]</a>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2">
<div class="group relative">
<button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SERVICES]</button>
<div class="mt-2 space-y-1 pl-4">
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</p>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a>
<p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</p>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a>
</div>
</div>
<div class="group relative">
<button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SOLUTIONS]</button>
<div class="mt-2 space-y-1 pl-4">
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</p>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a>
<p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</p>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a>
<a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a>
</div>
</div>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.ABOUT_US]</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.BLOG]</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.CONTACT]</a>
</div>
<div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
<div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Your Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>Composants associés
Composant Mega Menu
Un composant Mega Menu réactif conçu pour la consommation de blogs/contenu, avec des micro-interactions et un accent sur les couleurs de terre, avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Mega Menu
Méga composant de menu avec conception matérielle, schéma de couleurs triadique, niveau complexe, à des fins de tableau de bord, réactif avec prise en charge du thème sombre.
Glassmorphism Mega Menu Component
Glassmorphism Mega Menu pour les interfaces de tableau de bord avec palette de couleurs triadique. Dispose d’un effet de verre givré, d’un design réactif et d’une prise en charge du mode sombre à l’aide de Tailwind CSS.