Table of Contents Component
A simple Table of Contents component designed in Material Design style, utilizing earth tones and supporting dark mode. Suitable for content consumption in blogs.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
</li>
</ul>
</div>Related Components
Table of Contents Component
A simple, vibrant, and responsive Table of Contents component with a 3D design feel, suitable for travel/tourism websites, including dark mode support.
Glassmorphism_RealEstate_TableOfContents
A glassmorphism-styled Table of Contents component for real estate listings, featuring translucent elements, blur effects, and a purple/violet color scheme. It's responsive and supports dark mode.
Table of Contents Component
A responsive Table of Contents component for social media interfaces, designed with a dark mode UI using earth tones and a simple layout. It supports dark theme using Tailwind CSS and is HTML-only with no JavaScript.