Search Components

Mega Menu

Large dropdown panel displaying multiple navigation options

Mega Menu Component

A minimalist mega menu component designed for showcasing work or products with a dark theme support.

                <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>

Mega Menu Component

Mega Menu Component with Neumorphism style for Blog/Content website, using Analogous color scheme and Moderate complexity. Responsive design with dark theme support. No JavaScript.

Open Preview

                <nav class="bg-gray-200 dark:bg-gray-800 transition-colors duration-300 ease-in-out">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Name</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Home</a>
                        <div class="relative group">
                            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Categories</button>
                            <div class="absolute z-10 left-0 mt-2 w-60 bg-gray-200 dark:bg-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 ease-in-out neu">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Technology</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Travel</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Food</a>
                            </div>
                        </div>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">About</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Contact</a>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 neu neu-pressed">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Home</a>
            <div class="group">
                <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left neu neu-pressed">Categories</button>
                <div class="pl-4 mt-2 space-y-1">
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Technology</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Travel</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Food</a>
                </div>
            </div>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Contact</a>
        </div>
    </div>

    <style>
        .neu {
            box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
        }
        .dark .neu {
            box-shadow: 5px 5px 10px #4b4b4b, -5px -5px 10px #333333;
        }
        .neu-pressed {
             box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
        }
        .dark .neu-pressed {
            box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
        }
    </style>
</nav>

Simple Dark Mode Mega Menu

A simple, responsive mega menu component for business websites using dark mode with a complementary color scheme. Built with Tailwind CSS, featuring dark theme support and no JavaScript.

Open Preview

                <header class="bg-gray-900 text-gray-300">
  <nav class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-white">Your Logo</a>
      <div class="hidden md:flex space-x-8">
        <div class="relative group">
          <button class="hover:text-white">Menu 1</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category 1</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link 1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category 2</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link A</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link B</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="relative group">
          <button class="hover:text-white">Menu 2</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category X</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link X1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category Y</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link Y1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y3</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="hover:text-white">About</a>
        <a href="#" class="hover:text-white">Contact</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-300 hover:text-white focus:outline-none">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

Mega Menu Component with Glassmorphism style, Monochromatic color scheme, Complex complexity level, for Dashboard purpose. Responsive design with dark theme support. Uses Tailwind CSS. No JavaScript code needed.

Open Preview

                <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
  <div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
    <h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
    <button class="text-gray-300 hover:text-white focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Overview</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Management</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Projects</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Support</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
    <div>
      <p class="text-gray-400 text-sm">Last updated: Today</p>
    </div>
    <div>
      <img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
  </div>
</div>

Mega Menu Component

Mega Menu Component with Material Design, Triadic color scheme, Complex level, for Dashboard purpose, responsive with dark theme support.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md: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"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Mega Menu Component

Responsive Tailwind CSS Mega Menu with 3D Design, Analogous Color Scheme, and Dark Mode Support

Open Preview

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 shadow-xl">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-white text-2xl font-bold">BlogName</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-white hover:text-gray-200 transition duration-300">Categories</button>
        <div class="absolute z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-6 mt-2 transition duration-300 transform translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0" style="perspective: 1000px;">
          <div class="grid grid-cols-2 gap-4" style="transform: rotateY(0deg);">
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
            </div>
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 py-4 px-4">
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Home</a>
    <div class="relative group">
      <button class="block text-white hover:text-gray-200 transition duration-300 py-2">Categories</button>
      <div class="relative z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-4 mt-2 transition duration-300">
        <div class="grid grid-cols-1 gap-2">
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
        </div>
      </div>
    </div>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">About</a>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Contact</a>
  </div>
</nav>

Mega Menu Component

A Mega Menu Component with a Brutalist design style, featuring a monochromatic color scheme and responsive design suitable for a blog or content platform.

Open Preview

                <div class="bg-gray-900 text-gray-100 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-3xl font-bold">My Blog</h1>
    <button class="text-gray-100 hover:text-gray-300">Menu</button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 1</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 2</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 3</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-8 flex justify-evenly">
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
  </div>
  <div class="text-center mt-4">
    <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
  </div>
</div>

Brutalist Mega Menu

A responsive mega menu component with a brutalist design, featuring earth tones and dark mode support for a blog or content-driven website.

Open Preview

                <div class="bg-brown-900 dark:bg-gray-800 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-white text-2xl font-bold">Blog</div>
            <nav class="mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Home</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">About</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Categories</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 1</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 2</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 3</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
        </div>
    </div>
</div>

Mega Menu Component

Mega Menu component with dark mode support

Open Preview

                <nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg class="h-6 w-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-4 6h4"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

Retro Mega Menu

A retro/vintage styled mega menu component with responsive effects and dark theme support, implemented using Tailwind CSS. No JavaScript is included. Dark mode is handled purely with CSS.

Open Preview

                <'nav' class="bg-gray-800 text-retro-yellow font-retro-sans">
  <'div' class="container mx-auto px-4 sm:px-6 lg:px-8">
    <'div' class="flex items-center justify-between h-16">
      <'div' class="flex items-center">
        <'div' class="flex-shrink-0">
          <'h1' class="text-2xl font-bold">RetroShop<'/h1'>
        <'/div'>
        <'div' class="hidden md:block">
          <'div' class="ml-10 flex items-baseline space-x-4">
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'>
            <'div' class="relative group">
              <'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/button'>
              <'div' class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 invisible group-hover:visible">
                <'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                  <'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Electronics<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Apparel<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Home Goods<'/p'>
                      <'/div'>
                    <'/a'>
                  <'/div'>
                <'/div'>
              <'/div'>
            <'/div'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'>
          <'/div'>
        <'/div'>
      <'/div'>
      <'div' class="-mr-2 flex md:hidden">
        <'button' type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <'span' class="sr-only">Open main menu<'/span'>
          <'!-- Icon when menu is closed. -->
          <'!--
            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
          <'svg' class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          <'/svg'>
          <'!-- Icon when menu is open. -->
          <'!--
            Heroicon name: outline/x

            Menu open: "block", Menu closed: "hidden"
          -->
          <'svg' class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          <'/svg'>
        <'/button'>
      <'/div'>
    <'/div'>
  <'/div'>

  <'!-- Mobile menu, show/hide based on menu state. -->
  <'div' class="md:hidden" id="mobile-menu">
    <'div' class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'>
      <'div' class="group">
        <'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'>
        <'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible">
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'>
        <'/div'>
      <'/div'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'>
    <'/div'>
  <'/div'>
<'/nav'>