Mega Menú Brutalista
Un mega componente de menú receptivo con un diseño brutalista, con tonos tierra y soporte de modo oscuro para un blog o sitio web basado en contenido.
Código HTML
<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>Componentes relacionados
Componente Mega Menú
Un componente de Mega Menú responsivo con estilo Skeuomorphism, con soporte para temas oscuros usando Tailwind CSS.
Componente Mega Menú - Redes Sociales
Un componente de mega menú habilitado para modo oscuro y receptivo diseñado para aplicaciones de redes sociales, siguiendo una estética de Material Design con un esquema de color en escala de grises. Incluye secciones para tendencias, categorías y perfiles.
Componente Mega Menú
Un mega menú receptivo de estilo corporativo para plataformas educativas, con múltiples categorías, cursos recientes y enlaces de recursos. Incluye soporte para el modo oscuro y un diseño limpio y confiable con un color de acento.