3Dデザインヘッダー

3Dデザイン要素とダークモードをサポートするレスポンシブヘッダーコンポーネント。

プレビュー

HTMLコード

<header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

関連コンポーネント

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

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

開ける

サイバーパンクヘッダーコンポーネント

サイバーパンクをテーマにした未来的なヘッダーコンポーネントで、ドキュメントやWikiサイト用です。鮮やかなネオンのアクセント(エレクトリックブルー、ホットピンク、ライムグリーン)、レスポンシブナビゲーション、ダークモードのサポートを備えた暗い背景が特徴です。

開ける

ヘッダーコンポーネント

音楽/オーディオプラットフォーム用のレスポンシブヘッダーコンポーネントで、アースカラーとダークモードのサポートを備えたモノスペース/開発者デザインの美学を特徴としています。

開ける