Компонент мега меню
Отзывчивый компонент Mega Menu, стилизованный под скевоморфизм, с поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<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"/>
</svg>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div class="mt-6">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
<div class="flex space-x-4 mt-2">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>Связанные компоненты
Мега меню Cyberpunk
Сложное мега-меню в стиле киберпанк для сайтов еды и ресторанов с неоновыми акцентами, темным фоном, полной отзывчивостью и поддержкой темных режимов.
Компонент Мега Меню - Социальные Сети
Отзывчивый компонент мегаменю с поддержкой темного режима, разработанный для приложений социальных сетей, в соответствии с эстетикой Material Design с цветовой схемой в оттенках серого. Он включает в себя разделы для трендов, категорий и профилей.
Компонент мега меню
Адаптивный компонент мега-меню, разработанный с 3D-видом, включая эффекты глубины и поддержку темной темы с использованием Tailwind CSS. Компонент содержит изображения и аватары пользователей из сервисов-заполнителей.