CCHub Logo CCHub Tailwind Collection
コンポーネント サイトマップ サイトマップコンポーネント

サイトマップコンポーネント

パステルカラーを使用したダークモード用に設計されたレスポンシブサイトマップコンポーネントで、ダッシュボードに適しています。

プレビュー

HTMLコード 

<div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <p class="mb-4">Overview of the main sections:</p>
    <ul class="space-y-2">
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>User Management</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Reports</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Settings</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <p class="font-bold">User Profile</p>
        <div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
            <span>John Doe</span>
        </div>
    </div>
</div>

関連コンポーネント

サイトマップコンポーネント

ソーシャル メディア インターフェース用のマテリアル デザイン スタイルのサイトマップ コンポーネントで、Tailwind CSS を使用した応答性とダーク モードのサポートを特徴としています。ソーシャルネットワーキングプラットフォーム用のアースカラーと中程度の複雑さを組み込んでいます。

開ける

サイトマップコンポーネント

Eコマースのダークモードをサポートするレスポンシブサイトマップコンポーネント。スタイリングにはTailwind CSSを使用します。類似の配色に従います。画像はpicsum.photosより。

開ける

Neumorphic_Industrial_Sitemap

工業および製造企業向けのレスポンシブなニューモーフィックサイトマップコンポーネントで、単色の配色とダークモードのサポートが特徴です。要素は、微妙な影を使用して背景から押し出されているように見えます。

開ける