Componente Mega Menú
Un Mega Componente de Menú receptivo diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises para sitios web comerciales y corporativos. Es compatible con el tema oscuro y utiliza Tailwind CSS para el estilo.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
<img src="https://picsum.photos/200/150?random=1" alt="Service 1" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Consulting</h3>
<p class="text-gray-600 dark:text-gray-400">Professional consulting services to help you grow.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
<img src="https://picsum.photos/200/150?random=2" alt="Service 2" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Marketing</h3>
<p class="text-gray-600 dark:text-gray-400">Effective marketing strategies tailored to your needs.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
<img src="https://picsum.photos/200/150?random=3" alt="Service 3" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Support</h3>
<p class="text-gray-600 dark:text-gray-400">24/7 support to assist with your queries.</p>
</div>
</div>
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mt-8">About Us</h2>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<p class="text-gray-600 dark:text-gray-400">Our team is dedicated to providing exceptional service and value.</p>
</div>
</div>Componentes relacionados
Componente Mega Menú
Mega Componente de Menú con Diseño Minimalista/Plano, Esquema de Color Vibrante, Nivel de Complejidad Complejo, para Propósitos de Tablero, usando Tailwind CSS. Diseño responsivo con soporte para temas oscuros. Sin código JavaScript, solo HTML con clases Tailwind. El modo oscuro usa el prefijo dark: de Tailwind para el estilo. Las imágenes usan picsum.photos y randomuser.me para avatares.
Mega Menú Retro Vintage
Un mega componente de menú receptivo diseñado en un estilo retro / vintage inspirado en la estética de los años 80 y 90, con soporte para temas oscuros e imágenes de marcador de posición.
Componente Mega Menú
Un mega componente de menú responsivo diseñado para blogs o consumo de contenido, con elementos de diseño 3D y colores en tonos tierra, con soporte para temas oscuros.