ポートフォリオナビゲーションバー
ダークテーマをサポートするレスポンシブナビゲーションバーで、マテリアルデザインの原則とアーストーンの配色を使用してポートフォリオWebサイト用に設計されています。これには、ブランドロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。デザインは適度に複雑で、さまざまな画面サイズに適応します。
HTMLコード
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<a href="#" class="flex items-center py-4 px-2">
<span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
<a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center space-x-3 ">
<a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
<a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
<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 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="mobile-menu hidden md:hidden">
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
<a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
</div>
</nav> 関連コンポーネント
ナビゲーションバーコンポーネント
eコマースWebサイト用のレスポンシブナビゲーションバーで、グレースケールの配色とTailwind CSSを使用したダークモードのサポートを備えたglassmorphismデザインスタイルが特徴です。
ナビゲーションバーコンポーネント
マテリアルデザインスタイルでデザインされたレスポンシブナビゲーションバーコンポーネントで、トライアドカラースキームで、ソーシャルメディアインターフェースに適しており、ダークテーマのサポートが含まれています。