ヘッダーコンポーネント
マルチベンダー市場向けの複雑で応答性の高いヘッダーコンポーネントで、ジュエルトーンの配色で紙/印刷の美学に触発されています。検索、ナビゲーション、ユーザープロファイル、カートが含まれます。
HTMLコード
<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>関連コンポーネント
スキューモーフィックヘッダーコンポーネント
スキューモーフィックスタイルのeコマースWebサイト向けに設計されたシンプルでレスポンシブなヘッダーコンポーネントで、グレースケールの配色を使用し、ダークモードをサポートします。