Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.
Codice HTML
<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>Componenti correlati
Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.
Componente di navigazione permanente
Un componente di navigazione appiccicoso con un design scheumorfico, una combinazione di colori triadici e un layout semplice, adatto per le interfacce dei social media. Supporta il design reattivo e il tema scuro.
Brutalismo Navigazione appiccicosa
Un complesso componente di navigazione appiccicosa con design brutale, combinazione di colori monocromatica, progettato per i portfolio, con design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.