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.
HTML Code
<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
</nav>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
<span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
</div>
</div>
</header>Composants associés
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
Un composant d’en-tête réactif avec un design rétro/vintage, avec un support de thème sombre et une esthétique nostalgique des années 80/90.
Composant d’en-tête vintage rétro
Un composant d’en-tête réactif avec un style de design rétro/vintage, avec prise en charge du mode sombre et une esthétique nostalgique inspirée des années 80 et 90.