ブログナビゲーションバー

ブログ/コンテンツ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>

関連コンポーネント

ナビゲーションバーコンポーネント

ダッシュボード用のレスポンシブナビゲーションバーで、アースカラーのダークモードテーマを備えています。ロゴ、ナビゲーションリンク、検索バー、ユーザープロファイルセクションが含まれています。インタラクティブな要素を備えた適度な複雑さのために設計されています。

開ける

Glassmorphismダッシュボードナビゲーションバー

Glassmorphism Tailwind CSS、レスポンシブおよびダークテーマのサポートを備えたモノクロコンプレックスダッシュボードナビゲーションバー。

開ける

スキューモーフィックナビゲーションバー

スキューモーフィックスタイルとパステルカラースキームでデザインされたポートフォリオナビゲーションバーコンポーネントで、ダークモードのサポートも含まれます。リンクやドロップダウンメニューなどのインタラクティブな要素を備えています。

開ける