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

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

レスポンシブエフェクトとダークテーマのサポートを備えたレトロ/ビンテージスタイルのサイドバーコンポーネント。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
    <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
    </div>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
                <span class="text-gray-800 dark:text-white">Dashboard</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
                <span class="text-gray-800 dark:text-white">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
                <span class="text-gray-800 dark:text-white">Settings</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
                <span class="text-gray-800 dark:text-white">Messages</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
                <span class="text-gray-800 dark:text-white">Logout</span>
            </a>
        </li>
    </ul>
</div>

関連コンポーネント

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

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

開ける

ニューモーフィズムサイドバー

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを備えたNeumorphismスタイルのサイドバーコンポーネント。

開ける

レトロ不動産サイドバー

レトロ/ビンテージの美的美学、温かみのあるニュートラルな配色を備えたシンプルでレスポンシブなサイドバーコンポーネントで、不動産プラットフォーム向けに設計されています。ダークモードのサポートが含まれています。

開ける