CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーションコンポーネント ナビゲーションコンポーネントコンポーネント

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

Tailwind CSSを使用したダークモードをサポートするレスポンシブナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。

プレビュー

HTMLコード 

<nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </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-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

関連コンポーネント

ブルータリストのソーシャルメディアナビゲーション

ソーシャルメディアアプリケーション向けのブルータリズムスタイルで設計されたレスポンシブナビゲーションコンポーネントで、補色の配色と最小限の要素を利用しています。

開ける

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

ロゴ、検索バー、ナビゲーションリンク、ショッピングカートアイコン、Tailwind CSSを使用したユーザーアバターを特徴とする、eコマースWebサイト用のミニマリストナビゲーションコンポーネント。このコンポーネントは、レスポンシブデザインとダークモードをサポートしています。

開ける

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

Skeuomorphicデザイン、ソーシャルメディアアプリケーションに適した類似の配色、ダークテーマのサポートを備えたシンプルでレスポンシブなナビゲーションコンポーネント。

開ける