Componente de mejora de la navegación
Un componente de mejora de la navegación diseñado en un estilo brutalista. Con efectos responsivos, compatibilidad con temas oscuros e imágenes de marcador de posición.
Código HTML
<nav class="bg-white dark:bg-gray-900 p-6 text-center">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
<h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
</div>
<ul class="flex space-x-6 mt-4 md:mt-0">
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
</ul>
</div>
<div class="mt-8">
<h2 class="text-xl text-black dark:text-white">Featured</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">Raw and bold imagery.</p>
</div>
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
</div>
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">High contrast designs.</p>
</div>
</div>
</div>
</nav>Componentes relacionados
Componentes de mejora de la navegación
Un componente de navegación de estilo Neumorphism con soporte para modo oscuro y diseño responsivo
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 simple de mejora de la navegación en modo oscuro para mostrar un portafolio, utilizando Tailwind CSS.