Mega Menu Component

<div class="relative bg-white dark:bg-gray-800">
  <nav class="flex flex-col md:flex-row justify-between items-center p-4">
    <div class="flex items-center">
      <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Brand</a>
      <div class="hidden md:flex space-x-4 ml-8">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Home</a>
        <div class="relative group">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Services</a>
          <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block transition duration-150 ease-in-out">
            <ul class="py-2">
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Web Design</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">SEO</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Content Writing</a></li>
            </ul>
          </div>
        </div>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">About Us</a>
      </div>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">
        <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>
  </nav>

  <div class="mt-4 max-w-6xl mx-auto px-2">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service One</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Two</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Three</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Four</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
    </div>
  </div>
</div>