HTML 代码
<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
<ul class="mt-4 space-y-3">
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
</li>
<li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
<a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
</li>
</ul>
</div>