Componente intestazione vintage retrò
Un componente di intestazione reattivo con uno stile retrò/vintage su misura per una dashboard con supporto per temi scuri.
Codice HTML
<header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
<h1 class="text-white text-3xl font-bold">My Dashboard</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
</nav>
</div>
<div class="mt-4">
<input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
</div>
<div class="mt-4 flex items-center space-x-3">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
<span class="ml-2 text-white">John Doe</span>
</div>
<button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
</div>
</header>Componenti correlati
Componente intestazione vintage retrò
Un componente dell'intestazione reattivo con uno stile di design retrò/vintage, con supporto per la modalità oscura e un'estetica nostalgica ispirata agli anni '80 e '90.
Componente intestazione
Un componente di intestazione reattivo con un design retrò/vintage, con supporto per temi scuri ed estetica nostalgica degli anni '80/'90.
Intestazione SocialMedia
Un componente di intestazione reattivo per le interfacce dei social media, progettato con un'interfaccia utente in modalità oscura utilizzando una combinazione di colori triadica ed elementi minimi. Include un titolo del sito, una barra di ricerca e un link al profilo utente, con stili adattati per la modalità oscura utilizzando Tailwind CSS.