ヘッダーコンポーネント

Neumorphismスタイルを使用して設計されたシンプルなヘッダーコンポーネントで、鮮やかな色で、ブログ/コンテンツのWebページに最適です。レスポンシブデザインのダークモードサポートを備えています。

プレビュー

HTMLコード

<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

関連コンポーネント

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

マテリアルデザインの原則でTailwind CSSを使用して構築されたレスポンシブなeコマースヘッダーコンポーネント。単色の配色(青の色合い)、検索機能、ナビゲーションメニュー、ショッピングカート、およびユーザープロファイルを備えています。ヘッダーには、影などの深度効果が含まれており、ダークモードがサポートされています。このコンポーネントは、モバイルハンバーガーメニューで完全にレスポンシブです。

開ける

ヘッダーコンポーネント

すりガラスのような半透明の要素とダークテーマのサポートを備えたGlassmorphismデザインを特徴とするレスポンシブヘッダーコンポーネント。

開ける

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

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

開ける