CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーション強化コンポーネント ナビゲーション拡張コンポーネントコンポーネント

ナビゲーション拡張コンポーネントコンポーネント

eコマースWebサイト用のダークモードをサポートするレスポンシブナビゲーションコンポーネント。目の疲れを軽減するために、暗い背景のトライアドカラースキームが特徴です。

プレビュー

HTMLコード 

<nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

関連コンポーネント

ナビゲーション強化コンポーネント

Tailwind CSS を使用したマテリアル デザインの概念で設計されたレスポンシブ ナビゲーション コンポーネントで、ダーク テーマのサポートとプレースホルダー イメージが特徴です。

開ける

ネイチャー Inspired_Entertainment_Navigation

エンターテインメント/メディアプラットフォーム向けの複雑で自然にインスパイアされたナビゲーションコンポーネントで、流れるようなラインとキャンディー/甘い配色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける

ナビゲーション強化コンポーネント

レトロ/ビンテージの美学でスタイル化されたレスポンシブナビゲーションコンポーネントで、eコマースアプリケーションに適しており、ダークテーマのサポートと適度なインタラクティブ性を備えています。

開ける