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 simple de mejora de la navegación en modo oscuro para mostrar un portafolio, utilizando Tailwind CSS.
Cyberpunk_Portfolio_Navigation
Un componente de navegación complejo y receptivo con temática cyberpunk para una cartera, con una estética futurista de color púrpura neón, fondos oscuros y elementos interactivos. Incluye 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.