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
Navegación de medios en modo oscuro
Un componente de navegación complejo y receptivo para plataformas de entretenimiento/medios, con una interfaz de usuario de modo oscuro con una paleta de colores bosque/verde. Incluye un logotipo, una barra de búsqueda, enlaces de navegación, un perfil de usuario y una campana de notificación.
Componentes de mejora de la navegación
Un componente de navegación responsivo con un estilo con una estética retro/vintage, adecuado para aplicaciones de comercio electrónico, con soporte para temas oscuros e interactividad moderada.
Navegación de Tarjetas de Noticias de Agricultura
Un componente de navegación simple, inspirado en papel / impresión que presenta una tarjeta de noticias para sitios web de agricultura y agricultura, utilizando un esquema de color análogo. Es totalmente receptivo con soporte para modo oscuro.