CCHub Logo CCHub Tailwind Collection
コンポーネント スティッキーナビゲーション スティッキーナビゲーションコンポーネント - ニューモーフィズム

スティッキーナビゲーションコンポーネント - ニューモーフィズム

Neumorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブスティッキーナビゲーションコンポーネントで、ポートフォリオWebサイトに適しています。Tailwind CSS をダーク モード クラスで使用し、Neumorphism エフェクトの微妙なシャドウを含めます。

プレビュー

HTMLコード 

<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>

関連コンポーネント

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

Glassmorphism スタイル、レスポンシブ エフェクト、Tailwind CSS を使用したダーク テーマのサポートを備えたスティッキー ナビゲーション コンポーネント。

開ける

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

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

開ける

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

クリーンで信頼性が高く、応答性の高いスティッキーナビゲーションバーは、企業/専門の使用に適したパステルカラーの配色で設計されており、天気/気候アプリケーションに適しています。ダークモードのサポートが含まれています。

開ける