ナビゲーションコンポーネントコンポーネント
Tailwind CSSを使用したダークモードをサポートするレスポンシブナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。
HTMLコード
<nav class="bg-gray-900 text-white">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
<span class="text-xl font-bold">MyCompany</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-purple-400">Home</a>
<a href="#" class="hover:text-purple-400">About</a>
<a href="#" class="hover:text-purple-400">Services</a>
<a href="#" class="hover:text-purple-400">Contact</a>
</div>
<div class="hidden md:block">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
</div>
</nav>関連コンポーネント
サイバーパンクウェザーナビゲーション
シンプルでレスポンシブなサイバーパンクをテーマにした天気予報アプリケーション用のナビゲーションコンポーネントで、落ち着いた色とネオンのアクセントが特徴で、ダークモードがサポートされています。
ソーシャル メディア ナビゲーション コンポーネント
ソーシャルメディアアプリケーション向けのシンプルでレスポンシブなナビゲーションコンポーネントで、ダークテーマとマテリアルデザインにインスパイアされた補色スキームを備えています。これには、ロゴ、ナビゲーションリンク、およびユーザーアバターが含まれています。