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 E-commerce
Un componente di intestazione reattivo per l'e-commerce creato utilizzando Tailwind CSS con i principi di Material Design. Presenta una combinazione di colori monocromatica (sfumature di blu), funzionalità di ricerca, menu di navigazione, carrello della spesa e profilo utente. L'intestazione include effetti di profondità come le ombre e supporta la modalità oscura. Il componente è completamente reattivo con un menu hamburger mobile.
Componente intestazione brutalista
Un componente di intestazione grezzo e in grassetto progettato con Tailwind CSS, caratterizzato da un contrasto elevato e layout insoliti adatti sia per temi chiari che scuri.
Componente intestazione
Un componente di intestazione semplice e reattivo per un blog o un sito di contenuti con stile monocromatico e supporto per la modalità scura, che si concentra su microinterazioni sottili quando si passa il mouse sui collegamenti di navigazione.