Composant d’en-tête de commerce électronique
Un composant d’en-tête d’e-commerce réactif construit à l’aide de Tailwind CSS avec les principes de Material Design. Dispose d’une palette de couleurs monochromatiques (nuances de bleu), d’une fonctionnalité de recherche, d’un menu de navigation, d’un panier d’achat et d’un profil utilisateur. L’en-tête comprend des effets de profondeur tels que des ombres et prend en charge le mode sombre. Le composant est entièrement réactif avec un menu de hamburgers mobile.
HTML Code
<!-- E-commerce Header with Material Design and Monochromatic Color Scheme -->
<header class="bg-blue-50 dark:bg-blue-900 shadow-md transition-colors duration-300">
<!-- Top Bar with announcements -->
<div class="bg-blue-600 dark:bg-blue-800 text-white py-2 px-4 text-center text-sm">
<p>Free shipping on orders over $50 | Use code WELCOME10 for 10% off your first order</p>
</div>
<!-- Main Header -->
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between py-4">
<!-- Logo -->
<div class="flex items-center mb-4 md:mb-0">
<a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-300">
<span class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
ShopMate
</span>
</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden mb-4 w-full flex justify-end">
<button class="mobile-menu-button p-2 rounded-md hover:bg-blue-100 dark:hover:bg-blue-700 transition duration-150 focus:outline-none">
<svg class="h-6 w-6 text-blue-700 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<!-- Search Bar -->
<div class="w-full md:w-1/3 order-3 md:order-2 mb-4 md:mb-0">
<div class="relative rounded-md shadow-sm">
<input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-md border border-blue-200 dark:border-blue-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-blue-800 dark:text-white transition-colors duration-300" />
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<!-- Right Menu Items -->
<div class="flex items-center space-x-5 order-2 md:order-3">
<!-- Theme Toggle -->
<button class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<!-- Wishlist -->
<a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</a>
<!-- Shopping Cart -->
<a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span class="absolute -top-2 -right-2 w-5 h-5 text-xs bg-blue-500 dark:bg-blue-400 text-white rounded-full flex items-center justify-center">3</span>
</a>
<!-- User Account -->
<a href="#" class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile" class="w-8 h-8 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-sm" />
</a>
</div>
</div>
<!-- Navigation Menu -->
<nav class="hidden md:block border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
<ul class="flex flex-wrap justify-center space-x-8">
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
<li class="group relative">
<a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
Women
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</li>
<li class="group relative">
<a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
Men
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</a>
</li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
<li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
</ul>
</nav>
<!-- Mobile Navigation Menu (Hidden by default) -->
<nav class="mobile-menu hidden md:hidden border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
<ul class="flex flex-col space-y-4 px-2">
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Women</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Men</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
<li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
</ul>
</nav>
</div>
</header>Composants associés
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.
SkeuoHeaderComponent
Un composant d’en-tête réactif avec un design Skeuomorphism, la prise en charge du thème sombre et une barre de navigation.
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.