Table of Contents コンポーネント
ダークモード UI スタイルでデザインされたレスポンシブな目次コンポーネントで、セクション、タイトル、説明、ランダムな画像/アバターが特徴です。
HTMLコード
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 1</h3>
<p class="text-gray-400">Description of Section 1</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 2</h3>
<p class="text-gray-400">Description of Section 2</p>
<img src="https://picsum.photos/200/100?random=2" alt="Random Image" class="mt-2 rounded" />
</li>
<li class="hover:bg-gray-800 rounded p-2 transition duration-300">
<h3 class="font-semibold">Section 3</h3>
<p class="text-gray-400">Description of Section 3</p>
<img src="https://picsum.photos/200/100?random=3" alt="Random Image" class="mt-2 rounded" />
</li>
</ul>
<div class="mt-5 border-t border-gray-700 pt-4">
<h4 class="font-semibold">Author</h4>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<span class="text-gray-400">John Doe</span>
</div>
</div>
</div>関連コンポーネント
Table of Contents コンポーネント
マテリアルデザインでスタイルが鮮やかな色でスタイル化されたレスポンシブな目次コンポーネントで、ダークモードのサポートや複数のインタラクティブ要素など、ブログやコンテンツの使用に適しています。
3D 目次コンポーネント
e コマース用に設計されたレスポンシブな目次コンポーネントで、3D デザイン要素と補色スキームが特徴です。インタラクティブ要素が含まれており、ダークモードをサポートしています。