メガメニューコンポーネント
ミニマリスト/フラットデザイン、鮮やかな配色、複雑な複雑さのレベルを備えたメガメニューコンポーネント、ダッシュボードの目的、Tailwind CSSを使用。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードは不要で、Tailwind クラスを含む HTML のみ。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像は picsum.photos を使用し、アバターには randomuser.me を使用します。
HTMLコード
<nav class="bg-white shadow-lg dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div>
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
<div class="relative group">
<button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
<div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
</div>
</div>
<div class="relative group">
<button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
<div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
</div>
</div>
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
<a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="mobile-menu-button">
<svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
<div class="relative group">
<button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
<div class="relative bg-white dark:bg-gray-700">
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
</div>
</div>
<div class="relative group">
<button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
<div class="relative bg-white dark:bg-gray-700">
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
<a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
</div>
</div>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
</div>
</nav>関連コンポーネント
メガメニューコンポーネント
ブログ/コンテンツ消費用に設計されたレスポンシブなメガメニューコンポーネントで、マイクロインタラクションとアーストーンの色に焦点を当て、Tailwind CSSを使用したダークモードをサポートしています。
メガメニューコンポーネント
Tailwind CSSで設計されたレスポンシブなMega Menuコンポーネントで、魅力的なアニメーションとダークテーマのサポートのためのマイクロインタラクションを備えています。