Componenti Navigazione Componente di navigazione

Componente di navigazione

Un componente di navigazione reattivo con stile per la modalità oscura utilizzando Tailwind CSS.

Anteprima

Codice HTML

<nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

Componenti correlati

Componente di navigazione

Un componente di navigazione di ispirazione retrò/vintage progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.

Aperto

Componente di navigazione del neumorfismo

Componente di navigazione del neumorfismo ottimizzato per i siti web di portfolio. Presenta un layout complesso con più elementi interattivi, un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS. La combinazione di colori è analoga.

Aperto

Componente di navigazione skeuomorfa

Un componente di navigazione scheumorfico progettato per imitare elementi del mondo reale come un pannello di controllo fisico o un cruscotto. Presenta un design reattivo, effetti al passaggio del mouse che simulano la pressione fisica dei pulsanti e supporto per temi scuri. La navigazione include ombre sottili, sfumature e texture per creare un aspetto tattile 3D che ricorda le interfacce fisiche.

Aperto