CCHub Logo CCHub Tailwind Collection
コンポーネント ヘッダ ソーシャルメディアヘッダー

ソーシャルメディアヘッダー

ソーシャルメディアインターフェース用のレスポンシブヘッダーコンポーネントで、トライアドカラースキームと最小限の要素を使用したダークモードUIで設計されています。これには、サイトのタイトル、検索バー、ユーザープロファイルリンクが含まれ、Tailwind CSSを使用したダークモードに適応したスタイルが含まれています。

プレビュー

HTMLコード 

<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-xl font-bold">SocialNet</div>
    <div class="flex-grow mx-4 max-w-md">
      <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
    </div>
    <nav>
      <a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
    </nav>
  </div>
</header>

関連コンポーネント

ヘッダーコンポーネント

音楽/オーディオプラットフォーム用のレスポンシブヘッダーコンポーネントで、アースカラーとダークモードのサポートを備えたモノスペース/開発者デザインの美学を特徴としています。

開ける

DarkTriadicシンプルビジネスヘッダー

ビジネスWebサイト向けのダークモードサポートを備えたレスポンシブヘッダーコンポーネント

開ける

Neon_Glow_Header_Component

ネオン/グロー効果とキャンディー/スウィートカラースキームを備えたSaaSアプリケーション用のレスポンシブヘッダーコンポーネントで、ダークモードのサポートとインタラクティブな要素が特徴です。

開ける