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

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

プレビュー

HTMLコード

<header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

関連コンポーネント

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

eコマースWebサイト用のレスポンシブで活気に満ちたマテリアルデザインにインスパイアされたヘッダーコンポーネントで、ナビゲーション、検索、ユーザーアクションを備えています。ダークモードをサポートします。

開ける

ヘッダーコンポーネント

レスポンシブヘッダーコンポーネントで、小さくて魅力的なアニメーションとTailwind CSSを使用したダークテーマのサポートによるマイクロインタラクションが特徴です。

開ける

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

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

開ける