CCHub Logo CCHub Tailwind Collection
コンポーネント 目次 Table of Contents コンポーネント

Table of Contents コンポーネント

Tailwind CSS を使用してマテリアルデザインの原則でスタイル設定されたレスポンシブな目次コンポーネントで、ダークモードをサポートし、プレースホルダー画像とアバターを備えています。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
                <a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
                <a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
                <a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
                <a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
            </div>
        </li>
    </ul>
</div>

関連コンポーネント

Table of Contents コンポーネント

マテリアルデザインでスタイルが鮮やかな色でスタイル化されたレスポンシブな目次コンポーネントで、ダークモードのサポートや複数のインタラクティブ要素など、ブログやコンテンツの使用に適しています。

開ける

Table of Contents コンポーネント

glassmorphism デザインとパステル調の配色を備えたレスポンシブな目次コンポーネントで、データの視覚化とコントロール パネルを備えたダッシュボードに適しています。

開ける

Table of Contents コンポーネント

Tailwind CSS を使用して Neumorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ダーク テーマのサポートとプレースホルダー画像とアバターの表示が特徴です。

開ける