ナビゲーションコンポーネント
Tailwind CSS を使用してダーク モード用にスタイル設定されたレスポンシブ ナビゲーション コンポーネント。
HTMLコード
<nav class="bg-gray-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold">Brand</a>
<a href="#" class="hidden md:block">Home</a>
<a href="#" class="hidden md:block">About</a>
<a href="#" class="hidden md:block">Services</a>
<a href="#" class="hidden md:block">Contact</a>
</div>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
</div>
</div>
</nav>
<main class="bg-gray-800 min-h-screen p-4">
<h1 class="text-3xl mb-4">Welcome to Our Website</h1>
<img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
<p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>
<footer class="bg-gray-900 text-white p-4">
<div class="container mx-auto text-center">
<p>© 2023 Navigation Component. All rights reserved.</p>
</div>
</footer>関連コンポーネント
ソーシャル メディア ナビゲーション コンポーネント
ソーシャルメディアインターフェース用に設計されたレスポンシブナビゲーションコンポーネントで、ダークテーマとTailwind CSSを使用したマテリアルデザインの美学が特徴です。
Gradient_Corporate_Blues_Navigation_Component
非営利団体/慈善団体のWebサイト向けに設計された複雑で応答性の高いナビゲーションコンポーネントで、企業の青のグラデーショントーン、スムーズなトランジション、ダークモードのサポートが特徴です。ロゴ、ナビゲーションリンク、コールトゥアクションボタン、モバイルメニューが含まれています。