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

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>

関連コンポーネント

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

ダッシュボード用の複雑で応答性の高いナビゲーションコンポーネントで、マイクロインタラクションと類似の配色を特徴とし、ダークモードをサポートしています。スタイリングにTailwind CSSを利用し、JavaScriptに依存せずにインタラクティブな要素を含めます。

開ける

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

Glassmorphism単色中程度のEコマースナビゲーションコンポーネント、ダークモードサポート

開ける

ブルータリストのソーシャルメディアナビゲーション

ソーシャルメディアアプリケーション向けのブルータリズムスタイルで設計されたレスポンシブナビゲーションコンポーネントで、補色の配色と最小限の要素を利用しています。

開ける