ナビゲーションコンポーネント
マイクロインタラクションとパステルカラースキームを備えたブログ用に設計されたシンプルなナビゲーションコンポーネント。レスポンシブレイアウトとダークテーマのサポートが特徴です。
HTMLコード
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>関連コンポーネント
Glassmorphism ナビゲーション コンポーネント
電子商取引サイト用のglassmorphismスタイルのナビゲーションコンポーネントで、単色、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートを特徴としています。
ナビゲーションコンポーネント
ポートフォリオWebサイト用のシンプルでレスポンシブなナビゲーションコンポーネントで、ダークモードUIを備えています。このデザインは補色を使用し、さまざまな画面サイズで読みやすさと美的魅力を確保します。