CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション サイドバーナビゲーション

サイドバーナビゲーション

アナログの配色とマイクロインタラクションを備えたレスポンシブサイドバーナビゲーションコンポーネント(ダークテーマのサポートを含む)。

プレビュー

HTMLコード 

<div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

関連コンポーネント

Gaming_Sidebar_Navigation_Component

ゲームWebサイト用のレスポンシブサイドバーナビゲーションコンポーネントで、高コントラスト、ダークモードのサポート、インタラクティブ要素を備えたモノスペース/開発者に触発されたデザインが特徴です。ゲームインターフェースやコミュニティポータルに最適です。

開ける

Glassmorphismサイドバーナビゲーション

Glassmorphismデザイン、ダークモードのサポート、およびTailwind CSSを使用したレスポンシブサイドバーナビゲーションコンポーネント。ぼかし効果のあるすりガラスのような半透明の要素が特徴です。

開ける

Brutalismサイドバーナビゲーション

アース トーン、適度な複雑さ、応答性、ダーク モードのサポートを備えたブルータリスト スタイルのサイドバー ナビゲーション コンポーネントで、Tailwind CSS を使用するブログ/コンテンツ サイト向けに設計されています。

開ける