HTML 代码
<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<ul class="space-y-4">
<li>
<a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 1:</span> Introduction
</a>
</li>
<li>
<a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 2:</span> About Me
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.1 My Background
</a>
</li>
<li>
<a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.2 Skills
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 3:</span> My Work
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.1 Project Alpha
</a>
</li>
<li>
<a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.2 Project Beta
</a>
</li>
<li>
<a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.3 Project Gamma
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 4:</span> Contact
</a>
</li>
</ul>
</div>
</div>
</div>