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

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

Glassmorphism効果と補色スキームで設計されたレスポンシブサイドバーコンポーネントで、ブログやコンテンツの消費に適しています。

プレビュー

HTMLコード 

<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

関連コンポーネント

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

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

開ける

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

レスポンシブデザインとダークテーマのサポートを備えたミニマルなサイドバーコンポーネントで、Tailwind CSSを利用しています。

開ける

シンプルで活気に満ちたブログサイドバー

Tailwind CSSを使用して鮮やかな色とマテリアルのような感触でデザインされた、ブログコンテンツ用のシンプルでレスポンシブなサイドバーコンポーネント。ナビゲーションリンクとユーザープロファイルセクションが含まれています。Tailwind の dark: プレフィックスを使用したダーク モードをサポートします。大きな画面では固定され、小さな画面では非表示になります。

開ける