Componenti Intestazione Componente intestazione

Componente intestazione

Un componente di intestazione reattivo con microinterazioni con piccole animazioni accattivanti e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<header class="bg-white dark:bg-gray-800 shadow-md p-4 transition duration-500">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="h-10 w-10 rounded-full mr-2 transition-transform duration-300 transform hover:scale-110" />
            <h1 class="text-xl font-bold text-gray-800 dark:text-white transition-colors duration-500">My Website</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Home</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">About</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Services</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Contact</a>
                </li>
            </ul>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-600 transition-transform duration-300 transform hover:scale-110" />
        </div>
    </div>
</header>

Componenti correlati

Componente intestazione 3D

Un componente di intestazione complesso e interattivo progettato per le interfacce dei social media che utilizza uno stile 3D con colori in scala di grigi. Include un logo, una barra di ricerca, avatar utente e pulsanti di azione, con comportamento reattivo e supporto per la modalità oscura.

Aperto

Skeuomorphism Componente di intestazione del portfolio semplice triadico

Aperto

Intestazione del dashboard complessa

Un componente di intestazione complesso e reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra, progettato per i cruscotti. Include il supporto per il tema scuro utilizzando Tailwind CSS e utilizza picsum.photos e randomuser.me per immagini/avatar demo.

Aperto