CCHub Logo CCHub Tailwind Collection
コンポーネント 目次 目次 コンポーネント 34

目次 コンポーネント 34

マテリアルデザインでスタイル設定されたレスポンシブな目次コンポーネントで、ダークテーマのサポートと Tailwind CSS の使用が特徴です。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="space-y-2">
        <li>
            <a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 1
            </a>
        </li>
        <li>
            <a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 2
            </a>
        </li>
        <li>
            <a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 3
            </a>
        </li>
        <li>
            <a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 4
            </a>
        </li>
        <li>
            <a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                Section 5
            </a>
        </li>
    </ul>
</div>

関連コンポーネント

Table of Contents コンポーネント

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

開ける

Glassmorphism_RealEstate_TableOfContents

不動産リスト用のglassmorphismスタイルの目次コンポーネントで、半透明の要素、ぼかし効果、紫/紫の配色が特徴です。応答性が高く、ダークモードをサポートしています。

開ける

3D_Music_TOC_Component

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

開ける