CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 3D ナビゲーションコンポーネント

3D ナビゲーションコンポーネント

Tailwind CSSで設計されたレスポンシブ3Dナビゲーションコンポーネントで、ダークテーマのサポートと魅力的な3次元要素が特徴です。

プレビュー

HTMLコード 

<nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
      <h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-2">
    <div class="flex flex-col space-y-2">
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
    </div>
  </div>
</nav>
<style>
  @media (prefers-color-scheme: dark) {
    nav {
      background-color: #1a202c;
    }
    .text-white {
      color: #f7fafc;
    }
    .text-gray-200 {
      color: rgba(255, 255, 255, 0.7);
    }
    .hover\:bg-gray-700:hover {
      background-color: #4a5568;
    }
    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>

関連コンポーネント

ラグジュアリーナビゲーションコンポーネント

ファッションおよび美容ブランド向けのエレガントで応答性の高いナビゲーションコンポーネントで、明るいアクセントカラー、ダークモードのサポート、最小限の要素を備えた洗練された黒と白のデザインが特徴です。

開ける

3D_Candy_Finance_Navigation

金融/銀行アプリケーション向けのシンプルで応答性の高いナビゲーションコンポーネントで、キャンディー/スウィートの配色と微妙な3Dデザイン要素が特徴で、ダークモードがサポートされています。

開ける

ミニマリストジュエルトーンフード/レストランナビゲーション

食品やレストランのWebサイト向けのミニマリストでレスポンシブなナビゲーションコンポーネントで、ジュエルトーン、ダークモードのサポート、すっきりとしたフラットデザインが特徴です。ロゴ、ナビゲーションリンク、召喚状ボタンが含まれ、モバイルフレンドリーなハンバーガーメニューがあります。

開ける