CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバー サイドバーコンポーネント

サイドバーコンポーネント

レトロ/ビンテージスタイルでデザインされたレスポンシブサイドバーコンポーネントで、ダッシュボードレイアウトの鮮やかな色が特徴です。ダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
    <h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
    </div>
    <div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-sm font-semibold">John Doe</span>
        </div>
    </div>
</div>

関連コンポーネント

サイドバーコンポーネント

スキューモーフィックなスタイルでデザインされたサイドバーコンポーネントで、デジタル形式で現実世界の感覚を提供します。レスポンシブデザインとダークテーマをサポートしています。

開ける

サイドバーコンポーネント

ダークモードをサポートする、eコマース用のレスポンシブでミニマリストのサイドバーコンポーネント。商品カテゴリとショッピングカートのアイコンが付いたシンプルなレイアウトが特徴です。

開ける

Consulting_Sidebar_Dark_Candy_Complex

コンサルティング/サービス用の複雑でレスポンシブなサイドバーコンポーネントで、キャンディー/甘い色のアクセントが付いたダークモードUIが特徴です。ナビゲーション、ユーザープロファイル、クイックリンクが含まれています。

開ける