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

サイドバーナビゲーションコンポーネント

Brutalismスタイルで設計されたレスポンシブなサイドバーナビゲーションコンポーネントで、eコマースアプリケーションに最適です。鮮やかな色、ハイコントラスト、さまざまなショッピングカテゴリへのリンク、ユーザーアカウントオプション、ショッピングカートにアクセスするための鮮やかな召喚状ボタンなど、複数のインタラクティブ要素を備えています。デザインはダークモードにも適応します。

プレビュー

HTMLコード 

<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
    <h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
    <ul class="mt-6 space-y-4">
        <li>  
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Products</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Categories</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Deals</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Account</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
            <span>View Cart</span>
        </a>
    </div>
    <div class="mt-auto">
        <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
            <span>Profile</span>
        </a>
    </div>
</div>

関連コンポーネント

レトロサイドバーナビゲーション

レトロ/ビンテージスタイルのサイドバーナビゲーションコンポーネントで、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えています。

開ける

サイドバーナビゲーションコンポーネント - グレースケール

レスポンシブサイドバーナビゲーションコンポーネント

開ける

サイドバーナビゲーションコンポーネント

インダストリアルデザインスタイル、温かみのあるニュートラルカラースキーム、ダークモードのサポートを備えたシンプルでレスポンシブなサイドバーナビゲーションコンポーネントで、暗号通貨/ブロックチェーンアプリケーションに適しています。

開ける