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

Table of Contents コンポーネント

Skeuomorphism デザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブ目次コンポーネントで、ポートフォリオに適しています。

プレビュー

HTMLコード 

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

関連コンポーネント

3D 目次コンポーネント

e コマース用に設計されたレスポンシブな目次コンポーネントで、3D デザイン要素と補色スキームが特徴です。インタラクティブ要素が含まれており、ダークモードをサポートしています。

開ける

バウハウスメディカルの目次

医療/ヘルスケアアプリケーション向けの複雑で応答性の高い目次コンポーネントで、バウハウスにインスパイアされた機能的なデザインと落ち着いた色、ダークモードのサポートが特徴です。ナビゲーション、検索、およびセクションのリンクが含まれています。

開ける

Table of Contents コンポーネント

3D デザインの感触を備えたシンプルで鮮やかで応答性の高い目次コンポーネントで、ダーク モードのサポートを含む旅行/観光 Web サイトに適しています。

開ける