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.
Codice HTML
<header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
<div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
MyBlog
</a>
</div>
<nav class="">
<ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Home
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Articles
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
About
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
<li>
<a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
Contact
<span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</li>
</ul>
</nav>
</div>
</header>Componenti correlati
Componente Intestazione E-commerce
Un componente di intestazione reattivo, dinamico e ispirato al Material Design per i siti Web di e-commerce, con navigazione, ricerca e azioni dell'utente. Supporta la modalità oscura.
Componente intestazione 3D
Un componente di intestazione complesso e interattivo progettato per le interfacce dei social media che utilizza uno stile 3D con colori in scala di grigi. Include un logo, una barra di ricerca, avatar utente e pulsanti di azione, con comportamento reattivo e supporto per la modalità oscura.
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.