Componente de mejora de la navegación
Un componente de navegación inspirado en el morfismo de vidrio diseñado para mostrar el trabajo de la cartera y los productos compatibles con tonos tierra y modo oscuro. El componente presenta un efecto de vidrio esmerilado, un diseño receptivo y elementos mínimos.
Código HTML
<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
</ul>
</div>
</nav>
<section class="p-8 bg-gray-50 dark:bg-gray-900">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
<p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
</div>
</div>
<!-- Repeat similar divs for more projects -->
</div>
</section>Componentes relacionados
Componentes de mejora de la navegación
Un componente de navegación diseñado en 3D con un esquema de color análogo, complejidad moderada, adecuado para la visualización de datos del tablero y los paneles de control.
Componentes de mejora de la navegación
Un componente de navegación de estilo retro/vintage diseñado para el consumo de blogs y contenido con soporte para temas oscuros.
Componente Componentes de mejora de navegación
Un componente de navegación complejo de estilo brutalista para sitios web corporativos con una combinación de colores análoga, diseño receptivo y compatibilidad con el modo oscuro. Presenta diseños inusuales y alto contraste.