Componente Mega Menú
Un componente de mega menú con un estilo de diseño brutalista, con un esquema de color monocromático y un diseño receptivo adecuado para un blog o plataforma de contenido.
Código HTML
<div class="bg-gray-900 text-gray-100 p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold">My Blog</h1>
<button class="text-gray-100 hover:text-gray-300">Menu</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 1</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 2</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 3</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
</div>
<div class="mt-8 flex justify-evenly">
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
</div>
<div class="text-center mt-4">
<p class="text-sm">© 2023 My Blog. All rights reserved.</p>
</div>
</div>Componentes relacionados
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.
Componente Mega Menú
Un componente de Mega Menú responsivo diseñado para blogs/consumo de contenido, con microinteracciones y un enfoque en los colores del tono tierra, con soporte para el modo oscuro usando Tailwind CSS.
Componente Mega Menú
Un mega componente de menú minimalista diseñado para mostrar trabajos o productos con soporte para temas oscuros.