ナビゲーションコンポーネント
パステルカラーの配色とシンプルなレイアウトを備えたeコマース用に設計されたレスポンシブダークモードナビゲーションコンポーネント。
HTMLコード
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
</div>
</div>
</nav>関連コンポーネント
バウハウスジュエルトーンナビゲーション
幾何学的なフォルムと宝石のような色調のシンプルで機能的なナビゲーションコンポーネントで、予約/予約システム用に設計されています。応答性とダークモードのサポートを備えています。
ガラス張りのグラデーションナビゲーションバー
このナビゲーションバーは、グラデーションカラーとすりガラス効果を組み合わせて、スクロール中に半透明の効果を維持するモダンなガラスデザインを特徴としています。
ソーシャル メディア ナビゲーション コンポーネント
ソーシャルメディアインターフェース用に設計されたレスポンシブナビゲーションコンポーネントで、ダークテーマとTailwind CSSを使用したマテリアルデザインの美学が特徴です。