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.
Codice HTML
<header class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
<h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
</nav>
<div class="relative md:hidden">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
<div class="container mx-auto px-4 py-2">
<div class="flex flex-col space-y-2">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
</div>
</div>
</div>Componenti correlati
Intestazione del dashboard complessa
Un componente di intestazione complesso e reattivo con elementi di progettazione 3D, combinazione di colori dei toni della terra, progettato per i cruscotti. Include il supporto per il tema scuro utilizzando Tailwind CSS e utilizza picsum.photos e randomuser.me per immagini/avatar demo.
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.
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.