CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーションバー Glassmorphismダッシュボードナビゲーションバー

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

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

プレビュー

HTMLコード 

<nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

関連コンポーネント

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

紙/印刷物にインスパイアされた美的感覚と宝石のような配色で設計された、複雑でレスポンシブなナビゲーションバーコンポーネントで、農業/農業のWebサイトに適しています。ダークモードのサポートと複数のインタラクティブ要素が含まれています。

開ける

アールデコ調のナビゲーションバー

アールデコ調のレスポンシブなCRM/ビジネスツール用ナビゲーションバーで、幾何学模様、豊かな宝石の色調、ダークモードのサポートが特徴です。インタラクティブな要素を含む適度な複雑さで設計されています。

開ける

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

スキューモーフィックなデザインスタイルを採用したソーシャルメディア用のシンプルなレスポンシブナビゲーションバーで、類似の配色を利用し、ダークモードをサポートしています。

開ける