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.
Código HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<h1 class="text-white text-xl font-bold">My Portfolio</h1>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
<li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
</nav>
<section class="bg-gray-900 dark:bg-gray-800 p-8">
<div class="max-w-6xl mx-auto text-center">
<h2 class="text-white text-2xl font-bold">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
</div>
<div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
<h3 class="text-white font-semibold mt-2">Project 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
<div class="max-w-6xl mx-auto text-center">
<p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
</div>
</footer>Componentes relacionados
Monospace_Booking_Navigation_Complex_Triadic
Un componente complejo de navegación de reservas/reservas con una estética monoespaciada/desarrollador. Cuenta con un esquema de color triádico, diseño receptivo y soporte de modo oscuro, ideal para sistemas de citas.
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.
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.