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

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

ブルータリズムスタイルでデザインされたナビゲーションコンポーネントで、ソーシャルメディアインターフェース用のパステルカラースキームが特徴で、レスポンシブレイアウトとダークテーマがサポートされています。

プレビュー

HTMLコード 

<nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-pink-200 dark:bg-gray-800">
  <div class="flex items-center mb-4 md:mb-0">
    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white">MySocial</h1>
  </div>
  <ul class="flex flex-col md:flex-row">
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Home</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Profile</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Messages</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Settings</a>
    </li>
    <li class="mx-2">
      <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200">Logout</a>
    </li>
  </ul>
</nav>

<section class="p-4 space-y-5">
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Recent Posts</h2>
    <p class="text-gray-700 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">User Activity</h2>
    <p class="text-gray-700 dark:text-gray-200">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Trending Topics</h2>
    <p class="text-gray-700 dark:text-gray-200">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </article>
</section>

<footer class="bg-pink-200 dark:bg-gray-800 p-4 text-center">
  <p class="text-gray-800 dark:text-white">© 2022 MySocial. All rights reserved.</p>
</footer>

関連コンポーネント

ニューモーフィズムナビゲーション

eコマース用のNeumorphismスタイルを備えたシンプルなレスポンシブナビゲーションコンポーネント。

開ける

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

レスポンシブデザインのダークモードナビゲーションバーで、ロゴ、アバター、ナビゲーション用のリンクが特徴です。

開ける

レトロなEコマースナビゲーションバー

eコマース向けのレトロ/ビンテージスタイルのグレースケールナビゲーションコンポーネントで、ホバーやドロップダウンなどのインタラクティブな要素を備えた適度な複雑さが特徴です。レスポンシブで、Tailwind CSSを使用したダークモードのサポートが含まれています。

開ける