CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 レトロナビ

レトロナビ

レトロ/ビンテージデザイン、鮮やかな配色、最小限の要素を備えた、シンプルでレスポンシブなダークモード互換のナビゲーションコンポーネントで、eコマースWebサイトに適しています。

プレビュー

HTMLコード 

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

関連コンポーネント

ニューモーフィズム ナビゲーション コンポーネント

Neumorphism Navigation Componentは、PortfolioのWebサイト用に最適化されています。複数のインタラクティブ要素を備えた複雑なレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。配色は類似です。

開ける

Gradient_Corporate_Blues_Navigation_Component

非営利団体/慈善団体のWebサイト向けに設計された複雑で応答性の高いナビゲーションコンポーネントで、企業の青のグラデーショントーン、スムーズなトランジション、ダークモードのサポートが特徴です。ロゴ、ナビゲーションリンク、コールトゥアクションボタン、モバイルメニューが含まれています。

開ける

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

ダークモードUI用に設計されたレスポンシブナビゲーションコンポーネントで、リンク、ドロップダウン、ロゴがあり、すべてTailwind CSSでスタイル設定されています。

開ける