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

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

マテリアルデザイン要素とパステルカラースキームを備えたeコマースアプリケーション向けに設計されたレスポンシブサイドバーコンポーネントで、ダークモードがサポートされています。

プレビュー

HTMLコード 

<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

関連コンポーネント

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

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

開ける

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

ポートフォリオ用のレスポンシブサイドバーコンポーネントで、ダークテーマの3Dデザインスタイルで、作品や製品の展示に適しており、いくつかのインタラクティブな要素と類似の配色を備えています。

開ける

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

Tailwind CSS を使用して Neumorphism スタイルで設計されたレスポンシブ サイドバー コンポーネント。微妙な影のあるソフトなUIの外観が特徴で、ダークモードをサポートし、プレースホルダー画像とアバターが含まれています。

開ける