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

ヘッダーコンポーネント

ブログやコンテンツサイト用のパステルカラースキームを備えたブルータリズムスタイルでデザインされたレスポンシブヘッダーコンポーネントで、ダークテーマのサポートが組み込まれています。

プレビュー

HTMLコード 

<header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </nav>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="text-gray-900 dark:text-white">Username</span>
    </div>
</header>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
        /* Define pastel colors */
        .bg-pastel-100 {
            background-color: #F9D7C1;
        }
    }
</style>

関連コンポーネント

ヘッダーコンポーネント

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

開ける

ヘッダーコンポーネント

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

開ける

Neon_Glow_Header_Component

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

開ける