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
Un composant de navigation autocollant de style brutaliste adapté aux interfaces de médias sociaux, doté d’un design audacieux et contrasté et d’une prise en charge du mode sombre.
Composant de navigation collante
Composant de navigation collant avec conception Skeuomorphism, réactif et prise en charge du thème sombre. Utilise Tailwind CSS.
Composant de navigation collante
Un composant de navigation autocollant avec un design skeuomorphe, une palette de couleurs triadique et une mise en page simple, adapté aux interfaces de médias sociaux. Il prend en charge le design réactif et le thème sombre.