메가 메뉴 컴포넌트
블로그 또는 콘텐츠 소비를 위해 설계된 반응형 메가 메뉴 구성 요소로, 3D 디자인 요소와 흙빛 색상을 특징으로 하며 어두운 테마를 지원합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Categories</h2>
<nav class="relative mt-4">
<ul class="flex space-x-6">
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 1</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 2</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 3</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-3</a>
</div>
</div>
</li>
</ul>
</nav>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Featured Posts</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Authors</h3>
<div class="flex space-x-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 1</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 2</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 3</span>
</div>
</div>
</div>
</div>