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

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

ブログ用に調整されたサイドバーナビゲーションコンポーネントで、3D要素と鮮やかな色で設計されています。ダークモードをサポートし、レスポンシブで、コンテンツの消費に適したシンプルなレイアウトが特徴です。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

関連コンポーネント

Eコマースサイドバーナビゲーション

Tailwind CSSで構築された、トライアドカラースキーム、ホバー時のマイクロインタラクション、ダークモードのサポートを特徴とする、eコマースWebサイト用のシンプルでレスポンシブなサイドバーナビゲーションコンポーネント。

開ける

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

3Dデザイン要素、類似の配色、インタラクティブ機能を備えた中程度の複雑さを備えたレスポンシブサイドバーナビゲーションコンポーネント。ブログやコンテンツWebサイトに適しています。

開ける

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

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

開ける