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

Table of Contents コンポーネント

スキューモーフィック要素とアース トーンを使用して設計されたレスポンシブ Table of Contents コンポーネントで、ポートフォリオ ショーケースに使用し、ダーク モードをサポートします。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-green-800 dark:text-green-200 mb-4">Table of Contents</h2>
    <ul class="space-y-4">
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section1" class="text-gray-800 dark:text-gray-200 font-semibold">Section 1</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section2" class="text-gray-800 dark:text-gray-200 font-semibold">Section 2</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section3" class="text-gray-800 dark:text-gray-200 font-semibold">Section 3</a>
        </li>
        <li class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition duration-300 hover:shadow-lg">
            <a href="#section4" class="text-gray-800 dark:text-gray-200 font-semibold">Section 4</a>
        </li>
    </ul>
</div>

関連コンポーネント

Table of Contents コンポーネント

スイス/インターナショナルのタイポグラフィに触発された、すっきりとしたミニマリスト、レスポンシブな目次コンポーネントで、ドキュメントやナレッジ ベース サイト向けに設計されており、温かみのあるニュートラル カラーと完全なダーク モードのサポートが特徴です。

開ける

3D_Music_TOC_Component

音楽/オーディオプラットフォーム向けの複雑で高コントラストの 3D インスパイアされた目次コンポーネントで、レスポンシブデザインとダークモードのサポートを特長としています。

開ける

Table of Contents コンポーネント

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

開ける