HTML 代码
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
<button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
<div class="flex space-x-4 mt-2">
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
<span>Profile 1</span>
</a>
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
<span>Profile 2</span>
</a>
</div>
</div>
</div>