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

ヘッダーコンポーネント

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

プレビュー

HTMLコード 

<header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

関連コンポーネント

ヘッダーコンポーネント

ダークテーマ、レスポンシブデザイン、および複数のインタラクティブ要素を含むポートフォリオ用のNeumorphismスタイルのヘッダーコンポーネント。

開ける

複雑なダッシュボードヘッダー

ダッシュボード用に設計された、3Dデザイン要素、アースカラーの配色を備えた複雑で応答性の高いヘッダーコンポーネント。Tailwind CSSを使用したダークテーマのサポートが含まれており、デモ画像/アバターにはpicsum.photosと randomuser.me を使用します。

開ける

マテリアルデザインビジネスヘッダー

マテリアルデザインは、ビジネスWebサイト用の補完的な配色を備えたシンプルなヘッダーコンポーネントに触発されました。ダークテーマをサポートするレスポンシブデザイン。

開ける