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

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

Microinteractionsで設計され、ユーザーアクションに基づく魅力的なアニメーションを特徴とするレスポンシブナビゲーションコンポーネントで、明るいテーマと暗いテーマの両方をサポートします。このコンポーネントには、プロファイル アバター、ナビゲーション リンク、ホバー効果が含まれます。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
        <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
    </div>
</nav>

関連コンポーネント

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

ダッシュボード用のレトロなビンテージ ナビゲーション コンポーネントで、補色による複雑なレイアウト、レスポンシブ デザイン、Tailwind CSS を使用したダーク テーマのサポートが特徴です。これには、ロゴ、ナビゲーションリンク、検索バー、およびユーザープロファイル情報が含まれます。

開ける

ソーシャルメディアナビゲーション

レスポンシブレイアウトとダークモード用に設計された、フォレストグリーンのパレットを備えた、すっきりとしたミニマリストのソーシャルメディアナビゲーションコンポーネント。メインナビゲーション、ユーザープロファイル、検索機能を備えています。

開ける

ダークモードポートフォリオナビゲーション

ポートフォリオ Web サイト用の複雑でレスポンシブなナビゲーション コンポーネントで、類似色のダーク モード UI が特徴で、作業や製品を紹介するように設計されています。デスクトップ、タブレット、モバイルのレイアウトとドロップダウンとユーザーアバターが含まれます。

開ける