Componenti Barra di navigazione Barra di navigazione Componente 47

Barra di navigazione Componente 47

Una barra di navigazione reattiva con uno stile di design 3D, che incorpora profondità e coinvolgimento, supportando il tema scuro.

Anteprima

Codice HTML

<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

Componenti correlati

Barra di navigazione del cruscotto Glassmorphism

Glassmorphism Barra di navigazione del cruscotto complesso monocromatico con Tailwind CSS, supporto per temi reattivi e scuri.

Aperto

Componente della barra di navigazione

Un semplice componente della barra di navigazione reattivo progettato per una dashboard, caratterizzato da una combinazione di colori monocromatica e microinterazioni. Include un supporto per la modalità oscura con effetti al passaggio del mouse per animazioni coinvolgenti.

Aperto

Componente della barra di navigazione

Un componente della barra di navigazione reattivo progettato in stile Material Design con combinazione di colori triadica, adatto per le interfacce dei social media e include il supporto per il tema scuro.

Aperto