Table of Contents コンポーネント
マテリアルデザインでスタイルが鮮やかな色でスタイル化されたレスポンシブな目次コンポーネントで、ダークモードのサポートや複数のインタラクティブ要素など、ブログやコンテンツの使用に適しています。
HTMLコード
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section1" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 1: Introduction</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section2" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 2: Features</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section3" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 3: Implementation</span>
</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition duration-200">
<a href="#section4" class="flex items-center text-gray-600 dark:text-gray-200">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3">
<span class="font-medium">Section 4: Conclusion</span>
</a>
</li>
</ul>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Images</h3>
<div class="grid grid-cols-2 gap-4 mt-2">
<img src="https://picsum.photos/200/150?random=1" alt="Random Image 1" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=2" alt="Random Image 2" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=3" alt="Random Image 3" class="rounded-lg shadow">
<img src="https://picsum.photos/200/150?random=4" alt="Random Image 4" class="rounded-lg shadow">
</div>
</div>
</div>関連コンポーネント
Table of Contents コンポーネント
Tailwind CSS を使用したダークモードをサポートするレスポンシブ目次コンポーネント。このコンポーネントはポートフォリオ用に設計されており、単色の配色とJavaScriptを使用しない適度な複雑さのレベルを特徴としています。
目次
Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。