CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーションバー スキューモーフィックナビゲーションバー

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

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

プレビュー

HTMLコード 

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

関連コンポーネント

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

Glassmorphism グレースケール シンプルなソーシャル メディア ナビゲーション バー コンポーネント

開ける

ポートフォリオナビゲーションバー

ダークテーマをサポートするレスポンシブナビゲーションバーで、マテリアルデザインの原則とアーストーンの配色を使用してポートフォリオWebサイト用に設計されています。これには、ブランドロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。デザインは適度に複雑で、さまざまな画面サイズに適応します。

開ける

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

eコマースWebサイト用のレスポンシブナビゲーションバーで、グレースケールの配色とTailwind CSSを使用したダークモードのサポートを備えたglassmorphismデザインスタイルが特徴です。

開ける