メガメニューコンポーネント
教育プラットフォーム向けのレスポンシブな企業スタイルのメガメニューであり、複数のカテゴリ、最近のコース、リソースリンクを備えています。ダークモードのサポートと、アクセントカラーのすっきりとした信頼できるデザインが含まれています。
HTMLコード
<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>関連コンポーネント
メガメニューコンポーネント
ダッシュボード用のGlassmorphismスタイル、単色の配色、複雑な複雑さのレベルを備えたメガメニューコンポーネント。ダークテーマをサポートするレスポンシブデザイン。Tailwind CSSを使用します。JavaScript コードは必要ありません。