Composant d’en-tête
Un composant d’en-tête réactif conçu dans un style Brutalism avec une palette de couleurs pastel pour un blog ou un site de contenu, intégrant la prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant d’en-tête
Un composant d’en-tête réactif pour un tableau de bord avec des micro-interactions et des couleurs vives, prenant en charge le thème sombre.
Composant d’en-tête
Un composant d’en-tête simple et réactif pour les réseaux sociaux, avec prise en charge du mode sombre. Il comporte un logo, une barre de recherche et un avatar de l’utilisateur. Utilise un jeu de couleurs en niveaux de gris.
Composant d’en-tête
composant d’en-tête tailwind avec conception 3D, palette de couleurs pastel, complexité complexe, objectif du tableau de bord, conception réactive et prise en charge du thème sombre