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 skeuomorphic
Un composant d’en-tête simple et réactif conçu pour les sites Web de commerce électronique avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre.
Composant d’en-tête
Un composant d’en-tête réactif doté d’un design Glassmorphism avec des éléments translucides givrés ressemblant à du verre et une prise en charge du thème sombre.
Composant d’en-tête 3D
Composant d’en-tête complexe et interactif conçu pour les interfaces de médias sociaux à l’aide d’un style 3D avec des couleurs en niveaux de gris. Il comprend un logo, une barre de recherche, des avatars d’utilisateurs et des boutons d’action, avec un comportement réactif et une prise en charge du mode sombre.