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>

関連コンポーネント

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

紙/印刷物にインスパイアされた美的感覚と宝石のような配色で設計された、複雑でレスポンシブなナビゲーションバーコンポーネントで、農業/農業のWebサイトに適しています。ダークモードのサポートと複数のインタラクティブ要素が含まれています。

開ける

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

スキューモーフィックスタイルとパステルカラースキームでデザインされたポートフォリオナビゲーションバーコンポーネントで、ダークモードのサポートも含まれます。リンクやドロップダウンメニューなどのインタラクティブな要素を備えています。

開ける

グラデーション/カラートランジショングレースケールダッシュボードナビゲーションバー

ダッシュボード用の複雑で応答性の高いナビゲーションバーで、グレースケールの配色でグラデーショントランジションを備えています。複数のインタラクティブ要素と完全なダークモードのサポートが含まれています。

開ける