메가 메뉴 컴포넌트
Glassmorphism 스타일로 디자인된 반응형 메가 메뉴 컴포넌트로, 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
HTML 코드
<div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
<nav class="relative z-10">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
<div class="hidden lg:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
<div class="relative group">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
<div class="p-4">
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
</div>
<div class="lg:hidden">
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>
</button>
</div>
</div>
</div>
</nav>
<div class="hidden lg:block relative overflow-hidden">
<img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
<a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
</div>
</div>
</div>
<footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
<p class="text-gray-800 dark:text-white">© 2023 My Company</p>
</footer>
</div>