メガメニューコンポーネント
Tailwind CSS を使用した深度エフェクトやダーク テーマのサポートなど、3D ルックでデザインされたレスポンシブ メガ メニュー コンポーネント。このコンポーネントは、プレースホルダーサービスの画像とユーザーアバターを特徴としています。
HTMLコード
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
Menu
</button>
</div>
<div class="grid grid-cols-3 gap-4 p-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
<div class="flex flex-wrap">
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>関連コンポーネント
メガメニューコンポーネント
教育プラットフォーム向けのレスポンシブな企業スタイルのメガメニューであり、複数のカテゴリ、最近のコース、リソースリンクを備えています。ダークモードのサポートと、アクセントカラーのすっきりとした信頼できるデザインが含まれています。