Componente de navegación pegajosa
Una barra de navegación pegajosa y receptiva diseñada con microinteracciones y un esquema de color triádico, adecuada para blogs y consumo de contenido.
Código HTML
<header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
<div class="flex justify-between items-center p-4">
<a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
<nav class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
</nav>
</div>
<div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>
<main class="pt-20 px-4">
<section class="my-8">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
</div>
</section>
</main>
<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
<p class="text-gray-800 dark:text-gray-200">© 2023 MyBlog. All rights reserved.</p>
</footer>Componentes relacionados
Componente de navegación pegajosa
Un componente de navegación pegajoso y receptivo diseñado con los principios de Material Design utilizando Tailwind CSS, con un tema oscuro e incluyendo imágenes de marcador de posición aleatorias y avatar.
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 diseñado en un estilo skeuomórfico, que muestra colores complementarios, adecuado para una cartera con una interfaz rica.