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

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

マイクロインタラクションとパステルカラースキームを備えたブログ用に設計されたシンプルなナビゲーションコンポーネント。レスポンシブレイアウトとダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
            <span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
        </div>
        <ul class="flex space-x-6">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </li>
        </ul>
    </div>
</nav>

関連コンポーネント

Corporate_Travel_Navigation

旅行/観光Webサイト用の複雑でクリーンで信頼できる企業スタイルのナビゲーションバー。複数のインタラクティブ要素、完全な応答性、補色を使用したダークモードのサポートを備えています。

開ける

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

デート/ソーシャルプラットフォーム用に設計されたシンプルでレスポンシブなニューモルフィックナビゲーションバーで、ダークモードをサポートするフォレスト/グリーンのカラーパレットを使用しています。

開ける

ソーシャル メディア ナビゲーション コンポーネント

ソーシャルメディアインターフェース用に設計されたレスポンシブナビゲーションコンポーネントで、ダークテーマとTailwind CSSを使用したマテリアルデザインの美学が特徴です。

開ける