Componente de navegación
Un componente de navegación responsivo diseñado para el modo oscuro con Tailwind CSS.
Código HTML
<nav class="bg-gray-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold">Brand</a>
<a href="#" class="hidden md:block">Home</a>
<a href="#" class="hidden md:block">About</a>
<a href="#" class="hidden md:block">Services</a>
<a href="#" class="hidden md:block">Contact</a>
</div>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
</div>
</div>
</nav>
<main class="bg-gray-800 min-h-screen p-4">
<h1 class="text-3xl mb-4">Welcome to Our Website</h1>
<img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
<p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>
<footer class="bg-gray-900 text-white p-4">
<div class="container mx-auto text-center">
<p>© 2023 Navigation Component. All rights reserved.</p>
</div>
</footer>Componentes relacionados
Barra de navegación de comercio electrónico
Neumorfismo Barra de navegación de comercio electrónico con tonos tierra
Componente de navegación 3D
Un componente de navegación 3D responsivo diseñado con Tailwind CSS, con soporte para temas oscuros y elementos tridimensionales atractivos.
Componente de navegación
Una barra de navegación limpia, profesional y receptiva adecuada para plataformas educativas, con un esquema de color triádico, compatibilidad con modo oscuro y un diseño simple con enlaces de navegación comunes y un botón de llamada a la acción.