메가 메뉴 컴포넌트
블로그 또는 콘텐츠 소비를 위해 설계된 반응형 메가 메뉴 구성 요소로, 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>관련 구성 요소
메가 메뉴 컴포넌트
반응형 Mega Menu Component는 비즈니스 및 기업 웹사이트를 위한 그레이스케일 색 구성표의 스큐어모픽 스타일로 설계되었습니다. 어두운 테마를 지원하고 스타일링에 Tailwind CSS를 사용합니다.
ArtDecoPhotography메가메뉴
보석 톤의 아르데코 스타일로 디자인된 단순하고 반응이 빠른 메가 메뉴 구성 요소로, 사진 포트폴리오에 적합합니다. 다크 모드 지원이 포함됩니다.