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

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

Tailwind CSSを使用したマテリアルデザインの原則でスタイル設定されたレスポンシブスティッキーナビゲーションコンポーネントで、ダークテーマが特徴で、ランダムなプレースホルダー画像とアバターが含まれています。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
    <div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div>
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
                <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="pt-16">
    <header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
    </header>
    <section class="p-8">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
        </div>
    </section>
</div>

<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1f2937;
        }
    }
</style>

関連コンポーネント

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

Neumorphism デザイン、補色スキーム、適度な複雑さ、ダッシュボードのレスポンシブなダーク テーマのサポートを備えたスティッキー ナビゲーション コンポーネント。このデザインには、ニューモーフィズム効果のソフトシャドウが組み込まれており、補色を使用して視覚的に魅力的なインターフェイスを作成しています。データの視覚化とコントロールパネルを提供するダッシュボードに適しています。

開ける

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

スキューモーフィックなスタイルでデザインされたスティッキーナビゲーションコンポーネントで、補色を配色し、豊富なインターフェースを備えたポートフォリオに適しています。

開ける

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

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

開ける