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
Componente Mega Menú
Un componente de mega menú de comercio electrónico simple y de modo oscuro con un esquema de color en escala de grises, construido con Tailwind CSS. Es responsivo e incluye soporte para el tema oscuro usando el prefijo dark: de Tailwind.
Componente Mega Menú
Mega Componente de menú con estilo Glassmorphism, esquema de color monocromático, nivel de complejidad complejo, para fines de tablero. Diseño responsivo con soporte para temas oscuros. Utiliza Tailwind CSS. No se necesita código JavaScript.