Componente de navegación Brutalismo
Un componente de navegación responsivo diseñado en un estilo brutalista, que muestra un esquema de color monocromático, ideal para un sitio web de portafolio. Las características incluyen un diseño audaz con alto contraste, compatibilidad con el modo oscuro con Tailwind CSS y elementos interactivos como menús desplegables o enlaces de botones.
Código HTML
<nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
<div class="text-white font-bold text-2xl">
Portfolio
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
</li>
</ul>
<div class="relative group">
<button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
Menu
</button>
<div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
</div>
</div>
</nav>
<section class="bg-gray-800 dark:bg-gray-900 p-10">
<h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 1</h3>
<p class="text-gray-300">Short description of project 1.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 2</h3>
<p class="text-gray-300">Short description of project 2.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 3</h3>
<p class="text-gray-300">Short description of project 3.</p>
</div>
</div>
</div>
</section>
Componentes relacionados
RetroDashboardNavigation
Un componente de navegación de tablero complejo de temática retro con esquema de color triádico, diseñado para la visualización de datos y paneles de control. Cuenta con un diseño responsivo, compatibilidad con el modo oscuro y múltiples elementos interactivos inspirados en la estética de los años 80/90.
Divertido componente de navegación criptográfica en escala de grises
Un componente de navegación en escala de grises divertido y amigable para aplicaciones de criptomonedas y blockchain, con elementos redondeados, estados interactivos, capacidad de respuesta completa y compatibilidad con el modo oscuro.
Componentes de navegación
Un componente de navegación diseñado con un estilo brutalista, con una combinación de colores pastel para las interfaces de redes sociales, con un diseño receptivo y soporte para temas oscuros.