메가 메뉴 컴포넌트
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>관련 구성 요소
메가 메뉴 컴포넌트
블로그/콘텐츠 웹사이트에 대한 Neumorphism 스타일의 Mega Menu Component, Analogous color scheme 및 Moderate complexity를 사용합니다. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.