Composant Mega Menu
Un méga menu réactif de style entreprise pour les plateformes éducatives, avec plusieurs catégories, des cours récents et des liens vers des ressources. Comprend la prise en charge du mode sombre et un design propre et digne de confiance avec une couleur d’accentuation.
HTML Code
<nav class="bg-white shadow-lg dark:bg-gray-800">
<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">
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">Edu<span class="text-indigo-600">Hub</span></a>
</div>
<div class="hidden md:ml-6 md:flex md:space-x-8">
<div class="relative group">
<button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Categories
<svg class="ml-2 -mr-0.5 h-4 w-4" 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 class="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-screen max-w-4xl px-2 sm:px-0">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8 md:grid-cols-2 lg:grid-cols-3">
<div>
<h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Featured Courses</h3>
<nav class="mt-4 grid gap-y-2">
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 h-6 w-6 text-indigo-600">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19v-7a2 2 0 012-2h10a2 2 0 012 2v7m-7 4v-4m0 0H9m5 0h2" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Data Science Masterclass</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Learn data analysis, machine learning, and AI.</p>
</div>
</a>
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 h-6 w-6 text-indigo-600">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H7a2 2 0 00-2 2v11a2 2 0 002 2z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Web Development Bootcamp</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Build modern websites with HTML, CSS, JavaScript.</p>
</div>
</a>
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 h-6 w-6 text-indigo-600">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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-2zm0 0H9m7 0a2 2 0 002-2V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v14a2 2 0 002 2h2a2 2 0 002-2z" /></svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Digital Marketing Fundamentals</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Master SEO, SEM, social media, and more.</p>
</div>
</a>
</nav>
</div>
<div>
<h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Browse by Topic</h3>
<nav class="mt-4 grid gap-y-2">
<a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<p class="text-base font-medium text-gray-900 dark:text-white">Programming</p>
</a>
<a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<p class="text-base font-medium text-gray-900 dark:text-white">Business & Finance</p>
</a>
<a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<p class="text-base font-medium text-gray-900 dark:text-white">Design & Creativity</p>
</a>
<a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<p class="text-base font-medium text-gray-900 dark:text-white">Health & Fitness</p>
</a>
<a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
<p class="text-base font-medium text-gray-900 dark:text-white">Language Learning</p>
</a>
</nav>
</div>
<div>
<h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Newest Releases</h3>
<div class="mt-4 space-y-4">
<div class="flex items-center space-x-4">
<img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1018/300/200" alt="Course thumbnail">
<div>
<a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Advanced Python for AI</a>
<p class="text-xs text-gray-500 dark:text-gray-400">Dr. Emily White</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1025/300/200" alt="Course thumbnail">
<div>
<a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Financial Modeling with Excel</a>
<p class="text-xs text-gray-500 dark:text-gray-400">Prof. David Green</p>
</div>
</div>
</div>
<div class="mt-6 text-center">
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
View All Courses
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Learning Paths</a>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">For Business</a>
<div class="relative group">
<button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Resources
<svg class="ml-2 -mr-0.5 h-4 w-4" 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 class="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-48 px-2 pt-2 pb-4 sm:px-0">
<div class="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 py-1 bg-white dark:bg-gray-900">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Blog</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">FAQs</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Support</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Partnerships</a>
</div>
</div>
</div>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
</div>
</div>
<div class="flex items-center">
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<svg class="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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div class="ml-3 relative group">
<div>
<button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</button>
</div>
<div class="hidden group-hover:block absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md shadow-lg py-1 bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none" 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 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" 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 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!--
Heroicon name: outline/menu
Menu open: "hidden", Menu closed: "block"
-->
<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
Menu open: "block", Menu closed: "hidden"
-->
<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>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="bg-indigo-50 dark:bg-indigo-800 dark:bg-opacity-50 text-indigo-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Categories</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Learning Paths</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">For Business</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Resources</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800 dark:text-white">Tom Cook</div>
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
<button type="button" class="ml-auto flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<svg class="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="M15 17h5l-1.405-1.405A2.032 203 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>Composants associés
Composant de menu Neumorphic Mega
Un composant de méga menu neumorphe avec un comportement réactif et une prise en charge du mode sombre.
Composant Mega Menu
Un composant de méga menu réactif conçu avec Tailwind CSS, avec des micro-interactions pour des animations attrayantes et une prise en charge des thèmes sombres.
Composant Mega Menu
Méga composant de menu avec un design minimaliste / plat, une palette de couleurs vives, un niveau de complexité complexe, à des fins de tableau de bord, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Les images utilisent picsum.photos et randomuser.me pour les avatars.