Header Component
A complex, responsive header component for a multi-vendor marketplace, inspired by paper/print aesthetics with a jewel-tone color scheme. Includes search, navigation, user profile, and cart.
HTML Code
<header class="bg-amber-50 dark:bg-stone-950 shadow-md border-b-2 border-stone-200 dark:border-amber-950 print-pattern relative z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div class="flex items-center justify-between h-16">
<!-- Logo and Site Name -->
<div class="flex items-center">
<a href="#" class="flex-shrink-0 flex items-center">
<svg class="h-8 w-8 text-emerald-700 dark:text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.44 1.94l-1.42 1.42M20 10h-1m-1.94 6.44l-1.42-1.42M10 20v1m-6.44-1.94l1.42-1.42M3 10H2m1.94-6.44l1.42 1.42M15 9a3 3 0 11-6 0 3 3 0 016 0zm6 3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="ml-2 text-2xl font-serif font-black tracking-tighter text-emerald-800 dark:text-emerald-200">Marketplace</span>
</a>
</div>
<!-- Search Bar (Desktop/Tablet) -->
<div class="flex-1 mx-4 hidden lg:block">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-stone-400 dark:text-stone-600" fill="currentColor" viewBox="0 0 20 20">
<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>
<input type="search" placeholder="Search for emeralds, rubies, and more..." class="block w-full pl-10 pr-3 py-2 border border-stone-300 dark:border-stone-700 rounded-lg leading-5 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-sans text-sm shadow-inner-paper dark:shadow-inner-paper-dark">
</div>
</div>
<!-- Right-side actions (Desktop/Tablet) -->
<div class="hidden lg:flex items-center space-x-6">
<nav class="flex space-x-6">
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Shop</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Sell</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md rounded-lg text-sm font-medium font-serif transition-colors duration-200">Blog</a>
</nav>
<div class="relative">
<button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
<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 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
</svg>
<span class="ml-1 text-sm font-medium font-serif">Cart</span>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
</button>
</div>
<div class="relative">
<button type="button" class="max-w-xs bg-stone-100 dark:bg-stone-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
</button>
<!-- Dropdown menu (hidden by default) -->
<!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div> -->
</div>
</div>
<!-- Mobile Menu Button & Icons (Mobile/Tablet) -->
<div class="flex items-center lg:hidden">
<div class="mr-4">
<button class="relative flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
<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 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
</svg>
<span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
</button>
</div>
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 hover:bg-stone-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<!-- Heroicon name: outline/menu -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<!-- Heroicon name: outline/x -->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Search Bar (Mobile Only) -->
<div class="mt-4 lg:hidden">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-stone-400 dark:text-stone-600" fill="currentColor" viewBox="0 0 20 20">
<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>
<input type="search" placeholder="Search for emeralds, rubies, and more..." class="block w-full pl-10 pr-3 py-2 border border-stone-300 dark:border-stone-700 rounded-lg leading-5 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-sans text-sm shadow-inner-paper dark:shadow-inner-paper-dark">
</div>
</div>
</div>
<!-- Mobile Menu (hidden by default) -->
<!--
<div class="lg:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="bg-emerald-50 dark:bg-stone-700 text-emerald-700 dark:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif" aria-current="page">Shop</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Sell</a>
<a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Blog</a>
</div>
<div class="pt-4 pb-3 border-t border-stone-200 dark:border-stone-700 shadow-custom-paper dark:shadow-custom-paper-dark">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-stone-900 dark:text-stone-100 font-serif">Jane Doe</div>
<div class="text-sm font-medium leading-none text-stone-500 dark:text-stone-400 mt-1 font-sans">[email protected]</div>
</div>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Sign out</a>
</div>
</div>
</div>
-->
<style>
.print-pattern {
background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23edece2" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.dark .print-pattern {
background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23332200" fill-opacity="0.3"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
.shadow-inner-paper {
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.dark .shadow-inner-paper-dark {
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.shadow-custom-paper {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.dark .shadow-custom-paper-dark {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
/* Jewel Tones */
.text-emerald-700 { color: #016E65; } .dark\:text-emerald-300 { color: #6EE7B7; }
.text-emerald-800 { color: #005F55; } .dark\:text-emerald-200 { color: #A7F3D0; }
.focus\:ring-emerald-500 { --tw-ring-color: #10B981; }
.hover\:text-emerald-700 { color: #016E65; } .dark\:hover\:text-emerald-300 { color: #6EE7B7; }
.bg-emerald-50 { background-color: #ECFDF5; } .dark\:bg-stone-700 { background-color: #44403C; }
.bg-ruby-600 { background-color: #DC2626; } .dark\:bg-ruby-400 { background-color: #FB7185; }
</style>
</header>Related Components
Brutalist Header Component
A raw and bold header component designed with Tailwind CSS, featuring high contrast and unusual layouts suitable for both light and dark themes.
Skeuomorphism Triadic Simple Portfolio Header Component
Skeuomorphism Triadic Simple Portfolio Header Component
Retro Vintage Header Component
A responsive header component with a retro/vintage design style, featuring support for dark mode and nostalgic aesthetics inspired by the 80s and 90s.