CCHub Logo CCHub Tailwind Collection
コンポーネント ヘッダ RetroHeaderComponent (レトロヘッダーコンポーネント)

RetroHeaderComponent (レトロヘッダーコンポーネント)

レスポンシブエフェクトとダークテーマをサポートするレトロ/ビンテージヘッダーコンポーネント。

プレビュー

HTMLコード 

<header class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">RetroHeader</div>
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Contact</a>
    </nav>
    <div class="md:hidden">
      <button class="text-gray-800 dark:text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</header>

関連コンポーネント

ヘッダーコンポーネント

モノクロのスタイル設定とダークモードのサポートを備えたブログまたはコンテンツサイト用のシンプルでレスポンシブなヘッダーコンポーネントで、ナビゲーションリンクにカーソルを合わせたときの微妙なマイクロインタラクションに焦点を当てています。

開ける

ヘッダーコンポーネント

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

開ける

スキューモーフィックヘッダーコンポーネント

スキューモーフィックスタイルのeコマースWebサイト向けに設計されたシンプルでレスポンシブなヘッダーコンポーネントで、グレースケールの配色を使用し、ダークモードをサポートします。

開ける