ニューモーフィズムナビゲーション

eコマース用のNeumorphismスタイルを備えたシンプルなレスポンシブナビゲーションコンポーネント。

プレビュー

HTMLコード

<nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

関連コンポーネント

ブルータリズムのソーシャルナビゲーション

補色を使用したソーシャルメディア用のシンプルで残忍なナビゲーションコンポーネント。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

レトロなEコマースナビゲーションバー

eコマース向けのレトロ/ビンテージスタイルのグレースケールナビゲーションコンポーネントで、ホバーやドロップダウンなどのインタラクティブな要素を備えた適度な複雑さが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードのサポートが含まれています。

開ける

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

マテリアルデザインの原則に従ったレスポンシブナビゲーションコンポーネントで、ソーシャルメディアインターフェースを対象としたトライアドカラースキームで、ダークモードをサポートしています。

開ける