ブログナビゲーションバー
ブログ/コンテンツWebサイトのダークモードをサポートするレスポンシブナビゲーションバー。パステルカラーのミニマル/フラットなデザインが特徴。
HTMLコード
<nav class="bg-pink-100 dark:bg-purple-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
</div>
</div>
</nav>関連コンポーネント
ポートフォリオナビゲーションバー
ダークテーマをサポートするレスポンシブナビゲーションバーで、マテリアルデザインの原則とアーストーンの配色を使用してポートフォリオWebサイト用に設計されています。これには、ブランドロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。デザインは適度に複雑で、さまざまな画面サイズに適応します。