Componenti Navigazione permanente Componente di navigazione permanente

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.

Anteprima

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

Navigazione permanente (Glassmorphism)

Componente di navigazione permanente con stile Glassmorphism, reattivo e supporto per temi scuri.

Aperto

Componente di navigazione permanente

Un componente di navigazione appiccicosa reattivo con design minimalista, combinazione di colori triadica e supporto per temi scuri, adatto per applicazioni di social media.

Aperto

Nav appiccicoso skeuomorfo in scala di grigi

Una barra di navigazione appiccicosa reattiva per i blog, stilizzata con scheumorfismo utilizzando una tavolozza in scala di grigi. Dispone di supporto per la modalità oscura e un layout semplice. Costruito con Tailwind CSS (solo HTML), senza JavaScript. Il design scheumorfico mira a far apparire la barra di navigazione come un elemento fisico, leggermente rialzato.

Aperto