Composant de navigation collante
Une barre de navigation autocollante réactive conçue avec des micro-interactions et une palette de couleurs triadique, adaptée aux blogs et à la consommation de contenu.
HTML Code
<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>Composants associés
Navigation collante brutaliste
Un composant de navigation autocollant de style brutaliste avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Présente un contraste élevé, une typographie audacieuse et une esthétique austère et brute.
Composant de navigation collante
Composant de navigation collant avec le style Glassmorphism, les effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de navigation collante
Une barre de navigation simple, réactive et collante adaptée à une place de marché, avec un schéma de couleurs analogue et la prise en charge du mode sombre. Comprend des micro-interactions subtiles au survol.