Компонент мега меню
Простой, темный компонент мега-меню электронной коммерции с цветовой схемой в оттенках серого, созданный с использованием Tailwind CSS. Он адаптивный и включает поддержку темной темы с использованием префикса dark: от Tailwind.
HTML-код
<nav class="bg-gray-950 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">ShopName</a>
<div class="hidden md:flex space-x-6">
<div class="relative group">
<button class="hover:text-gray-300">Categories</button>
<div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
<a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
<a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
<a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
</div>
</div>
<a href="#" class="hover:text-gray-300">New Arrivals</a>
<a href="#" class="hover:text-gray-300">Sales</a>
<a href="#" class="hover:text-gray-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 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>Связанные компоненты
Компонент мега меню
Отзывчивый компонент Mega Menu, разработанный в стиле Glassmorphism, с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, поддерживающий темные темы с использованием Tailwind CSS.
Компонент мега меню
Адаптивное мегаменю Tailwind CSS с 3D-дизайном, аналогичной цветовой схемой и поддержкой темного режима
Компонент мега меню
Адаптивный компонент Mega Menu, выполненный в скевоморфном стиле с цветовой гаммой в оттенках серого для деловых и корпоративных сайтов. Он поддерживает темную тему и использует Tailwind CSS для стилизации.