레트로 빈티지 메가 메뉴

<nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">
      Retro Menu
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
      <div class="relative group">
        <button class="hover:text-gray-400 transition duration-200">
          More
        </button>
        <div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
          <div class="p-4">
            <h3 class="text-lg font-semibold">Categories</h3>
            <div class="flex flex-col mt-2 space-y-2">
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
                <span>Category 1</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
                <span>Category 2</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
                <span>Category 3</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
                <span>Category 4</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden">
      <button class="hover:text-gray-400 transition duration-200">
        Menu
      </button>
    </div>
  </div>
</nav>

<div class="bg-gray-100 dark:bg-gray-800">
  <div class="container mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
      color: white;
    }
  }
</style>