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>

関連コンポーネント

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

マイクロインタラクションとパステルカラースキームを備えたブログ用に設計されたシンプルなナビゲーションコンポーネント。レスポンシブレイアウトとダークテーマのサポートが特徴です。

開ける

レトロなビンテージナビゲーションコンポーネント

レトロ/ビンテージデザインでスタイリングされたナビゲーションコンポーネントで、ダッシュボードの単色の配色が施されています。リンクが含まれており、ダークモードをサポートしています。

開ける

3D_Candy_Finance_Navigation

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

開ける