Composant de navigation collante
Un composant de navigation autocollant au design plat minimaliste avec une palette de couleurs monochromatique pour les sites Web d’entreprise. La conception comprend plusieurs éléments interactifs et prend en charge le thème sombre.
HTML Code
<header class="bg-white dark:bg-gray-800 fixed top-0 inset-x-0 shadow-md z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Logo" class="w-10 h-10 rounded-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Business Name</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Contact</a>
</nav>
<a href="#" class="hidden md:block bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition duration-150">Get Started</a>
<button class="md:hidden flex items-center justify-center p-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 6h14M3 10h14M3 14h14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
</div>
</header>
<main class="mt-16 p-4">
<section class="bg-gray-100 dark:bg-gray-900 p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Business</h2>
<p class="text-gray-600 dark:text-gray-400">We provide exceptional services to help you grow your business.</p>
<img src="https://picsum.photos/800/400" alt="Business Image" class="mt-4 rounded-lg shadow-md">
</section>
</main>Composants associés
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.
Composant de navigation collante
Un composant de navigation autocollant conçu pour le mode sombre avec des effets réactifs utilisant Tailwind CSS.
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.