目次
Glassmorphism でスタイル設定されたレスポンシブな目次コンポーネントで、ぼかし効果とダーク テーマのサポートを備えたすりガラスのような半透明の要素が特徴です。視覚的に表現するためのセクションとプレースホルダー画像が含まれています。
HTMLコード
<div class="bg-white bg-opacity-30 backdrop-blur-md shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section1" class="text-gray-900 dark:text-white">Introduction</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section2" class="text-gray-900 dark:text-white">Features</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section3" class="text-gray-900 dark:text-white">Installation</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section4" class="text-gray-900 dark:text-white">Usage</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section5" class="text-gray-900 dark:text-white">Conclusion</a>
</li>
</ul>
<div class="mt-6">
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-lg">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-3 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: rgba(255, 255, 255, 0.1);
}
.text-gray-900 {
color: white;
}
.text-gray-700 {
color: #e0e0e0;
}
}
</style>関連コンポーネント
目次
Microinteractionsデザイン、類似の配色、単純な複雑さ、およびソーシャルメディアの目的を備えた目次コンポーネント。ダークテーマのサポートによるレスポンシブ。JavaScript コードはありません。
Table of Contents コンポーネント
スキューモーフィック要素とアース トーンを使用して設計されたレスポンシブ Table of Contents コンポーネントで、ポートフォリオ ショーケースに使用し、ダーク モードをサポートします。