Mega Menu Component - Forest/Green, Microinteractions, Non-profit
A responsive mega menu component designed for non-profit/charity websites, featuring a forest/green color palette, microinteractions on hover, and full dark mode support. It provides sections for 'Our Mission', 'How We Help', 'Events & News', and 'Get Involved'.
HTML Code
<nav class="bg-white shadow-lg dark:bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-emerald-700 dark:text-emerald-300 text-2xl font-bold font-serif">Green<span class="text-emerald-500">Heart</span></a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center">
<div class="relative group">
<button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
About Us
<svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="hidden group-hover:block absolute z-50 -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">
<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 dark:bg-gray-700">
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.142 0-7.5-3.358-7.5-7.5S12.858 5 17 5s7.5 3.358 7.5 7.5S21.142 20 17 20zM9 10a1 1 0 011 1v2a1 1 0 102 0v-2a1 1 0 011-1h-.5a1 1 0 100 2h.5V13a1 1 0 01-1 1h-2" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Our Mission</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Learn about our core values and objectives.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Our Impact</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">See the difference your support makes.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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 7v10m0 0h16m-16 0L8 7m4 0h4m4 0V7m0 0V4m0 0H4" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Team & Board</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Meet the people behind our cause.</p>
</div>
</a>
</div>
<div class="px-5 py-5 bg-gray-50 dark:bg-gray-800 sm:px-8 sm:py-8">
<div>
<h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Recent Stories</h3>
<ul class="mt-4 space-y-4">
<li class="text-base truncate">
<a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
Feeding hope: Our latest food drive success
</a>
</li>
<li class="text-base truncate">
<a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
Clean water for all: Updates from the field
</a>
</li>
</ul>
</div>
<div class="mt-5 text-sm">
<a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-300 dark:hover:text-emerald-200 transition duration-200 ease-in-out">
View all stories <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="relative group ml-8">
<button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
What We Do
<svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="hidden group-hover:block absolute z-50 -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">
<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 dark:bg-gray-700">
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18s-3.332.477-4.5 1.253" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Environmental Protection</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Preserving biodiversity and natural habitats.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.375m0 0h1.75C7.79 17.027 9.852 18 12 18h2m-4-0h4m-9-3c7.432 0 10.634-2.296 11.235-4.48c.214-.733.018-1.455-.088-2.072 0 0-.714 1.554-1.127 2.015A.75.75 0 0114 10z" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Community Development</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Empowering local communities through sustainable projects.</p>
</div>
</a>
<a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white sm:h-12 sm:w-12">
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
<div class="ml-4">
<p class="text-base font-medium text-gray-900 dark:text-white">Education & Awareness</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Spreading knowledge about environmental issues.</p>
</div>
</a>
</div>
<div class="bg-gray-50 dark:bg-gray-800 px-5 py-5 sm:px-8 sm:py-8">
<div>
<h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Case Studies</h3>
<ul class="mt-4 space-y-4">
<li class="text-base truncate">
<a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
Restoring Local Ecosystems
</a>
</li>
<li class="text-base truncate">
<a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
Sustainable Farming Initiatives
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Events & News</a>
<a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Get Involved</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<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. -->
<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="pt-2 pb-3 space-y-1">
<a href="#" class="bg-emerald-50 block pl-3 pr-4 py-2 border-l-4 border-emerald-500 text-base font-medium text-emerald-700 dark:bg-gray-700 dark:text-emerald-300 dark:border-emerald-300">About Us</a>
<a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">What We Do</a>
<a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Events & News</a>
<a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Get Involved</a>
</div>
</div>
</nav>Related Components
Mega Menu Component
A responsive Mega Menu Component designed in a skeuomorphic style with a grayscale color scheme for business and corporate websites. It supports dark theme and uses Tailwind CSS for styling.
Mega Menu Component - Memphis Earth Tones Food/Restaurant
A responsive mega menu component for food/restaurant websites, inspired by Memphis design with earth tones. Features bold colors, geometric shapes, and playful patterns. Includes dark mode support.