Componente intestazione
Un componente dell'intestazione reattivo con design Glassmorphism con elementi traslucidi simili al vetro smerigliato e supporto per temi scuri.
Codice HTML
<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
</nav>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
</div>
</header>Componenti correlati
Componente intestazione
Componente intestazione con microinterazioni, combinazione di colori complementari, complessità complessa, per scopi di dashboard, utilizzando Tailwind CSS.
Componente intestazione
Un componente di intestazione reattivo con supporto per la modalità scura, con un logo, collegamenti di navigazione e un pulsante di invito all'azione. Il design utilizza uno sfondo scuro per ridurre l'affaticamento degli occhi.
Componente intestazione
Un componente di intestazione complesso e reattivo per un marketplace multi-vendor, ispirato all'estetica della carta/stampa con una combinazione di colori in tono gioiello. Include ricerca, navigazione, profilo utente e carrello.