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

Table of Contents コンポーネント

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

プレビュー

HTMLコード 

<div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="w-full space-y-3">
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200"> 
            <a href="#section1">Section 1</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section2">Section 2</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section3">Section 3</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section4">Section 4</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section5">Section 5</a>
        </li>
    </ul>
    <div class="mt-6 w-full">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
    </div>
</div>

関連コンポーネント

Table of Contents コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブ目次コンポーネント。このコンポーネントはポートフォリオ用に設計されており、単色の配色とJavaScriptを使用しない適度な複雑さのレベルを特徴としています。

開ける

Table of Contents コンポーネント

マテリアルデザインスタイルでデザインされたシンプルな目次コンポーネントで、アースカラーを利用し、ダークモードをサポートしています。ブログでのコンテンツ消費に適しています。

開ける

レトロな目次

レトロ/ビンテージデザイン、類似の配色、ダークモードをサポートするレスポンシブ目次コンポーネント。ビジネス/企業のWebサイトに適しています。Tailwind CSSをJavaScriptなしで使用しています。

開ける