Mega Menu Component

<nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-screen-xl mx-auto px-4 py-2 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
        <div class="relative">
            <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
                Menu
            </button>
            <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-2 transition-opacity ease-in-out duration-200">
                <div class="grid grid-cols-3 gap-4 p-4">
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 1</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 2</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">More</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-screen-xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Featured Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Work 1">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Work 2">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Work 3">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</section>