메가 메뉴 컴포넌트
Neumorphism 스타일의 Mega Menu Component는 블로그 및 콘텐츠 소비를 위해 설계된 단색 색 구성표를 사용합니다. 다크 모드로 반응형 디자인을 지원합니다.
HTML 코드
<header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<nav class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-8">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
<div class="relative group">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
<div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
<ul class="py-2">
<li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden md:block">
<a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</a>
</div>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none">
<!-- Hamburger icon -->
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</nav>
</header>
<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
<h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
</div>
</div>
</main>관련 구성 요소
메가 메뉴 컴포넌트
Tailwind CSS를 사용하여 깊이 효과 및 어두운 테마 지원을 포함하여 3D 모양으로 디자인된 반응형 메가 메뉴 구성 요소입니다. 이 구성 요소는 자리 표시자 서비스의 이미지와 사용자 아바타를 특징으로 합니다.
Neumorphic_Mega_Menu_Weather_Climate
날씨 및 기후 데이터를 위한 반응형 뉴모픽 스타일의 메가 메뉴 구성 요소로, 파스텔 색조 구성표와 다크 모드 지원을 특징으로 합니다.
심플 다크 모드 메가 메뉴
보색 구성표와 함께 다크 모드를 사용하는 비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 메가 메뉴 구성 요소입니다. Tailwind CSS로 구축되었으며 어두운 테마를 지원하고 JavaScript가 없습니다.