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-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
    <ul class="list-disc pl-5 space-y-2">
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section1" class="text-gray-700 dark:text-gray-300">Section 1</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section2" class="text-gray-700 dark:text-gray-300">Section 2</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section3" class="text-gray-700 dark:text-gray-300">Section 3</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section4" class="text-gray-700 dark:text-gray-300">Section 4</a>
        </li>
        <li class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            <a href="#section5" class="text-gray-700 dark:text-gray-300">Section 5</a>
        </li>
    </ul>
</div>

<div class="mt-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section1" class="text-xl font-semibold text-gray-800 dark:text-white">Section 1</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 1. <img src="https://picsum.photos/200/100" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section2" class="text-xl font-semibold text-gray-800 dark:text-white">Section 2</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 2. <img src="https://picsum.photos/200/100?random=1" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section3" class="text-xl font-semibold text-gray-800 dark:text-white">Section 3</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 3. <img src="https://picsum.photos/200/100?random=2" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section4" class="text-xl font-semibold text-gray-800 dark:text-white">Section 4</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 4. <img src="https://picsum.photos/200/100?random=3" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>
<div class="mt-4 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h3 id="section5" class="text-xl font-semibold text-gray-800 dark:text-white">Section 5</h3>
    <p class="text-gray-700 dark:text-gray-300">Content for section 5. <img src="https://picsum.photos/200/100?random=4" alt="Random placeholder" class="mt-2 rounded-md" /></p>
</div>

関連コンポーネント

Table of Contents コンポーネント

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

開ける

目次

Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。

開ける

Table of Contents コンポーネント

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

開ける