Mega Menu Component
A Mega Menu Component with a Brutalist design style, featuring a monochromatic color scheme and responsive design suitable for a blog or content platform.
HTML Code
<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>Related Components
Mega Menu Component
A responsive Mega Menu component designed for blogs/content consumption, featuring microinteractions and a focus on earth tone colors, with dark mode support using Tailwind CSS.
Mega Menu Component
A responsive mega menu component designed with a skeuomorphic style using Tailwind CSS, featuring support for dark mode.
Neumorphic Mega Menu Component
A neumorphic mega menu component with responsive behavior and dark mode support.