Componente de navegación pegajosa
Una barra de navegación fija y receptiva que sigue las pautas de Material Design, con un modo oscuro.
Código HTML
<header class="bg-white dark:bg-gray-800 shadow fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="container mx-auto p-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full">
<h1 class="ml-2 text-xl font-semibold text-gray-800 dark:text-white">MyWebsite</h1>
</div>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="pt-16 bg-gray-100 dark:bg-gray-900">
<section class="container mx-auto py-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Welcome to MyWebsite</h2>
<p class="text-gray-700 dark:text-gray-300">This is a simple sticky navigation component built with Tailwind CSS. Scroll down to see the sticky effect in action.</p>
<div class="mt-10 space-y-4">
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
<div class="h-64 bg-gray-300 dark:bg-gray-700 rounded shadow">Placeholder for Content</div>
</div>
</section>
</main>Componentes relacionados
Componente de navegación pegajosa
Una barra de navegación fija simple, limpia y de alto contraste con una estética monoespaciada/de desarrollador, adecuada para plataformas de entretenimiento o medios.
Componente de navegación pegajosa
Una barra de navegación compleja, esqueuomórfica y pegajosa con colores vibrantes, diseñada para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS. Cuenta con imagen de perfil, barra de búsqueda, notificaciones e iconos de mensajería.
Componente de navegación pegajosa
Un componente de navegación pegajoso para el comercio electrónico, con un diseño minimalista/plano con colores vibrantes. Incluye un logotipo, una barra de búsqueda, un icono de carrito y un avatar de usuario, todo ello con Tailwind CSS para mejorar la capacidad de respuesta y la compatibilidad con temas oscuros.