Componente intestazione
Un componente di intestazione reattivo progettato in stile Brutalismo con una combinazione di colori pastello per un blog o un sito di contenuti, che incorpora il supporto per il tema scuro.
Codice HTML
<header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
</nav>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-900 dark:text-white">Username</span>
</div>
</header>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Define pastel colors */
.bg-pastel-100 {
background-color: #F9D7C1;
}
}
</style>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 microinterazioni e supporto per il tema scuro.
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.