Componentes de mejora de la navegación
Un componente de navegación diseñado con una estética brutalista, con diseños atrevidos, alto contraste y diseños inusuales. Incluye efectos responsivos y admite temas oscuros con CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-6">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
<h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
</div>
<ul class="flex space-x-6">
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#home">Home</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#about">About</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#services">Services</a>
</li>
<li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 my-6">
<img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
</div>
<div class="container mx-auto py-6">
<h2 class="text-xl font-bold text-black dark:text-white">Featured</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 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
</div>
<div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
<h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
</div>
</div>
</div>
<footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
<p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
</footer>
</nav>Componentes relacionados
Navegación de Tarjetas de Noticias de Agricultura
Un componente de navegación simple, inspirado en papel / impresión que presenta una tarjeta de noticias para sitios web de agricultura y agricultura, utilizando un esquema de color análogo. Es totalmente receptivo con soporte para modo oscuro.
Componentes de mejora de la navegación
Un componente de navegación responsivo diseñado con conceptos de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.
Componentes de mejora de la navegación
Un componente de navegación diseñado con skeuomorfismo, con elementos digitales que imitan a sus homólogos del mundo real. Está diseñado con Tailwind CSS con efectos responsivos y soporte para temas oscuros.