CCHub Logo CCHub Tailwind Collection
コンポーネント スティッキーナビゲーション スティッキーナビゲーションコンポーネント

スティッキーナビゲーションコンポーネント

Neumorphism デザイン、補色スキーム、適度な複雑さ、ダッシュボードのレスポンシブなダーク テーマのサポートを備えたスティッキー ナビゲーション コンポーネント。このデザインには、ニューモーフィズム効果のソフトシャドウが組み込まれており、補色を使用して視覚的に魅力的なインターフェイスを作成しています。データの視覚化とコントロールパネルを提供するダッシュボードに適しています。

プレビュー

HTMLコード 

<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

関連コンポーネント

Retro_Vintage_Sticky_Navigation_Component

イベントやカンファレンスのウェブサイト向けにデザインされた、レトロでビンテージ風の複雑でスティッキーなナビゲーションバーで、ソフトなパステルカラーの配色、完全な応答性、ダークモードのサポートが特徴です。ロゴ、ナビゲーションリンク、コールトゥアクションボタン、検索アイコンが含まれています。

開ける

スティッキーナビゲーションコンポーネント

Skeuomorphism デザイン、レスポンシブ、ダーク テーマをサポートするスティッキー ナビゲーション コンポーネント。Tailwind CSSを使用します。

開ける

ブルータリズムスティッキーナビゲーション

ブルータリズムデザイン、単色の配色、ポートフォリオ用に設計された複雑なスティッキーナビゲーションコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが特徴です。

開ける