CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 3D_Candy_Finance_Navigation

3D_Candy_Finance_Navigation

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

プレビュー

HTMLコード 

<nav class="bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300 dark:from-purple-900 dark:via-indigo-900 dark:to-gray-900 shadow-lg relative z-10 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-pink-300 mr-2 drop-shadow-md" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span class="text-white dark:text-white text-2xl font-extrabold tracking-tight drop-shadow-md">CandyBank</span>
        </a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Home
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Accounts
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Services
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Contact
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="bg-pink-400 dark:bg-indigo-700 inline-flex items-center justify-center p-2 rounded-md text-white dark:text-gray-300 hover:text-white hover:bg-pink-500 dark:hower:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-pink-300 drop-shadow-md" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!--
            Heroicon name: outline/menu
            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!--
            Heroicon name: outline/x
            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 bg-pink-400 dark:bg-purple-700 hover:bg-pink-500 hover:text-white dark:hover:bg-purple-800 transition duration-300 ease-in-out transform hover:scale-105">
        Home
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Accounts
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Services
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Contact
      </a>
    </div>
  </div>
</nav>

関連コンポーネント

レトロなナビゲーションバー

80年代/90年代の美学とダークモードのサポートを特徴とする、食品/レストランのWebサイトに適した、レスポンシブでコントラストの高いレトロ/ビンテージナビゲーションバー。

開ける

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

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

開ける

Gradient_Corporate_Blues_Navigation_Component

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

開ける