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

目次

Microinteractionsデザイン、類似の配色、単純な複雑さ、およびソーシャルメディアの目的を備えた目次コンポーネント。ダークテーマのサポートによるレスポンシブ。JavaScript コードはありません。

プレビュー

HTMLコード 

<nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

関連コンポーネント

Table of Contents コンポーネント

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

開ける

レトロキャンディーの目次

キャンディーにインスパイアされた配色のノスタルジックなレトロをテーマにした目次コンポーネントは、食品やレストランのWebサイトに適しています。スムーズなスクロールインジケーターとダークモードのサポートを備えた「スティッキー」サイドバーのようなナビゲーションを備えています。

開ける

Table of Contents コンポーネント

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

開ける