Composant d’en-tête de commerce électronique
Un composant d’en-tête réactif, dynamique, inspiré du Material Design pour les sites Web de commerce électronique, avec la navigation, la recherche et les actions de l’utilisateur. Prend en charge le mode sombre.
HTML Code
<header class="bg-gradient-to-r from-orange-500 to-red-600 dark:from-gray-900 dark:to-gray-800 shadow-lg relative z-50">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="flex items-center space-x-2">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-3 4m0 0l-3-4m3 4v-4m5 4l2 2m0 0l2 2m-2-2l-2 2m2-2l2-2M11 9L7 5m0 0L3 9m4-4l4 4" />
</svg>
<span class="text-white text-2xl font-bold tracking-tight hidden sm:block">ShopSwift</span>
</a>
<!-- Search Bar (Desktop) -->
<div class="flex-grow mx-4 hidden md:block">
<div class="relative">
<input type="text" placeholder="Search for products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-white focus:bg-white focus:text-gray-900 transition-all duration-300">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- User Actions & Mini-Cart -->
<nav class="flex items-center space-x-4">
<!-- Mobile Search Icon -->
<button class="md:hidden p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200" aria-label="Search">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Favorites">
<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>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">3</span>
</a>
<a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Shopping Cart">
<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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">7</span>
</a>
<a href="#" class="p-1 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-200" aria-label="User Profile">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-8 w-8 rounded-full object-cover">
</a>
</nav>
</div>
<!-- Main Navigation (Desktop) -->
<nav class="hidden md:block bg-gradient-to-r from-orange-600 to-red-700 dark:from-gray-800 dark:to-gray-700 py-2 shadow-inner">
<div class="container mx-auto px-4 flex justify-center space-x-8 text-white font-medium">
<a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">New Arrivals</a>
<a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Categories</a>
<a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Best Sellers</a>
<a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Deals</a>
<a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Support</a>
</div>
</nav>
</header>Composants associés
En-tête de conception 3D
Un composant d’en-tête réactif avec des éléments de conception 3D et la prise en charge du mode sombre.
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
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.