Componente intestazione skeuomorfa
Un componente di intestazione semplice e reattivo progettato per siti Web di e-commerce con uno stile scheumorfico, utilizzando una combinazione di colori in scala di grigi e supportando la modalità scura.
Codice HTML
<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
</nav>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
<span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
</div>
</div>
</header>Componenti correlati
Componente intestazione
Un componente di intestazione reattivo per una dashboard con microinterazioni e colori vivaci, che supporta il tema scuro.
Componente intestazione vintage retrò
Un componente dell'intestazione reattivo con uno stile di design retrò/vintage, con supporto per la modalità oscura e un'estetica nostalgica ispirata agli anni '80 e '90.
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.