ミニマリストナビゲーションバー
ミニマリストスタイルで設計されたレスポンシブナビゲーションバーコンポーネントで、ダークテーマをサポートし、Tailwind CSSを利用しています。
HTMLコード
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>
<div class="flex items-center">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
</div>
</div>
</nav>
<!-- Mobile menu button -->
<div class="md:hidden">
<button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>関連コンポーネント
ポートフォリオナビゲーションバー
ダークテーマをサポートするレスポンシブナビゲーションバーで、マテリアルデザインの原則とアーストーンの配色を使用してポートフォリオWebサイト用に設計されています。これには、ブランドロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。デザインは適度に複雑で、さまざまな画面サイズに適応します。