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
DarkTriadicSimpleBusinessHeader
Componente intestazione reattiva con supporto della modalità oscura per siti Web aziendali
Componente intestazione
Un componente di intestazione dal design minimalista e piatto per un portfolio, caratterizzato da un design reattivo con supporto per temi scuri e più elementi interattivi.
Componente intestazione
Un semplice componente di intestazione progettato utilizzando lo stile del neumorfismo con colori vivaci, perfetto per un blog/pagina web di contenuti. È dotato di supporto per la modalità oscura per un design reattivo.