Composant de navigation collante
Une barre de navigation autocollante réactive qui suit les directives de Material Design, avec un mode sombre.
HTML Code
<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>Composants associés
Composant de navigation autocollant - Pastel neumorphe
Un composant de navigation complexe et collant avec un style de conception Neumorphism et une palette de couleurs pastel, adapté à la documentation ou aux sites wiki. Il propose des éléments de navigation imbriqués, une barre de recherche et la prise en charge du mode sombre, le tout implémenté avec HTML et Tailwind CSS pour une réactivité totale.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.
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.