ナビゲーションコンポーネント
ポートフォリオWebサイト用のシンプルでレスポンシブなナビゲーションコンポーネントで、ダークモードUIを備えています。このデザインは補色を使用し、さまざまな画面サイズで読みやすさと美的魅力を確保します。
HTMLコード
<nav class="bg-gray-900 p-4 text-white">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-lg font-bold text-teal-400">MyPortfolio</a>
<ul class="flex space-x-4">
<li><a href="#about" class="hover:text-teal-400">About</a></li>
<li><a href="#projects" class="hover:text-teal-400">Projects</a></li>
<li><a href="#contact" class="hover:text-teal-400">Contact</a></li>
</ul>
</div>
</nav>関連コンポーネント
スキューモーフィック ナビゲーション コンポーネント
スキューモーフィック スタイルでデザインされたナビゲーション コンポーネントで、鮮やかな色とブログ コンテンツに適したレスポンシブ レイアウトが特徴です。ホバー効果などのインタラクティブ機能が含まれており、ダークモード用に最適化されています。
ガラス張りのグラデーションナビゲーションバー
このナビゲーションバーは、グラデーションカラーとすりガラス効果を組み合わせて、スクロール中に半透明の効果を維持するモダンなガラスデザインを特徴としています。