Componente intestazione
Un componente di intestazione semplice e reattivo per i social media, con supporto per la modalità scura. Presenta un logo, una barra di ricerca e un avatar dell'utente. Utilizza una combinazione di colori in scala di grigi.
Codice HTML
<header class="bg-white dark:bg-gray-900 p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo or Site Title -->
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>
<!-- Search Bar -->
<div class="flex-grow mx-4 max-w-xl">
<input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
</div>
<!-- User Avatar/Menu -->
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</header>Componenti correlati
Componente intestazione
Un componente di intestazione reattivo per una piattaforma musicale/audio, caratterizzato da un'estetica di design monospace/developer con toni della terra e supporto per la modalità oscura.
Intestazione aziendale di Material Design
Material Design ha ispirato un semplice componente di intestazione con una combinazione di colori complementari per siti Web aziendali. Design reattivo con supporto per temi scuri.
Neon_Glow_Header_Component
Un componente di intestazione reattivo per applicazioni SaaS con effetti neon/bagliore e una combinazione di colori caramelle/dolci, con supporto per la modalità scura ed elementi interattivi.