Table of Contents コンポーネント
マテリアルデザインスタイルでデザインされたレスポンシブな目次コンポーネントで、ビジネス/企業のWebサイト向けのアースカラーとダークテーマのサポートを備えています。
HTMLコード
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="mt-4 space-y-2">
<li class="flex items-center">
<img src="https://i.pravatar.cc/40" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section1" class="text-gray-700 dark:text-gray-300 hover:underline">Section 1</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/41" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section2" class="text-gray-700 dark:text-gray-300 hover:underline">Section 2</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/42" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section3" class="text-gray-700 dark:text-gray-300 hover:underline">Section 3</a>
</li>
<li class="flex items-center">
<img src="https://i.pravatar.cc/43" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<a href="#section4" class="text-gray-700 dark:text-gray-300 hover:underline">Section 4</a>
</li>
</ul>
</div>
<div class="bg-gray-200 dark:bg-gray-900 p-6 mt-6 rounded-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Additional Resources</h3>
<ul class="mt-2 space-y-1">
<li>
<a href="#resource1" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 1</a>
</li>
<li>
<a href="#resource2" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 2</a>
</li>
<li>
<a href="#resource3" class="text-gray-600 dark:text-gray-400 hover:underline">Resource 3</a>
</li>
</ul>
</div>関連コンポーネント
3D 目次コンポーネント
e コマース用に設計されたレスポンシブな目次コンポーネントで、3D デザイン要素と補色スキームが特徴です。インタラクティブ要素が含まれており、ダークモードをサポートしています。
Table of Contents コンポーネント
glassmorphism デザインとパステル調の配色を備えたレスポンシブな目次コンポーネントで、データの視覚化とコントロール パネルを備えたダッシュボードに適しています。
目次
Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。