CCHub Logo CCHub Tailwind Collection
コンポーネント ヘッダ ヘッダーコンポーネント

ヘッダーコンポーネント

ソーシャルメディア用のシンプルでレスポンシブなヘッダーコンポーネントで、ダークモードをサポートしています。ロゴ、検索バー、ユーザーアバターが特徴です。グレースケールの配色を使用します。

プレビュー

HTMLコード 

<header class="bg-white dark:bg-gray-900 p-4 shadow-md">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo or Site Title -->
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>

    <!-- Search Bar -->
    <div class="flex-grow mx-4 max-w-xl">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
    </div>

    <!-- User Avatar/Menu -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    </div>
  </div>
</header>

関連コンポーネント

Eコマースヘッダーコンポーネント

eコマースWebサイト用のレスポンシブで活気に満ちたマテリアルデザインにインスパイアされたヘッダーコンポーネントで、ナビゲーション、検索、ユーザーアクションを備えています。ダークモードをサポートします。

開ける

サイバーパンクヘッダーコンポーネント

サイバーパンクをテーマにした未来的なヘッダーコンポーネントで、ドキュメントやWikiサイト用です。鮮やかなネオンのアクセント(エレクトリックブルー、ホットピンク、ライムグリーン)、レスポンシブナビゲーション、ダークモードのサポートを備えた暗い背景が特徴です。

開ける

ヘッダーコンポーネント

マルチベンダー市場向けの複雑で応答性の高いヘッダーコンポーネントで、ジュエルトーンの配色で紙/印刷の美学に触発されています。検索、ナビゲーション、ユーザープロファイル、カートが含まれます。

開ける