CCHub Logo CCHub Tailwind Collection
コンポーネント スティッキーナビゲーション スティッキーナビゲーションコンポーネント

スティッキーナビゲーションコンポーネント

ソーシャルメディアインターフェイスに適したブルータリストスタイルのスティッキーナビゲーションコンポーネントで、大胆でハイコントラストなデザインとダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <h1 class="text-white text-lg font-bold">Social Media</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
        </ul>
    </div>
</nav>

<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
        <p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
    </div>
</header>

<main class="mt-4 p-4 container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
        </div>
    </div>
</main>

関連コンポーネント

スティッキーナビゲーションコンポーネント

ソーシャルメディアインターフェイス用に設計された、鮮やかな色の複雑でスキューモーフィックなスティッキーナビゲーションバー。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。プロフィール画像、検索バー、通知、メッセージングアイコンを備えています。

開ける

スティッキーナビゲーションコンポーネント - ニューモーフィズム

Neumorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブスティッキーナビゲーションコンポーネントで、ポートフォリオWebサイトに適しています。Tailwind CSS をダーク モード クラスで使用し、Neumorphism エフェクトの微妙なシャドウを含めます。

開ける

レトロなEコマーススティッキーナビゲーション

鮮やかな色、複雑な要素、応答性、Tailwind CSSを使用したダークモードのサポートを備えたeコマースサイト向けのレトロ/ビンテージスティッキーナビゲーションコンポーネント。

開ける