Table of Contents Component
A minimalistic and responsive Table of Contents component styled with Tailwind CSS, supporting dark mode and featuring clean design elements.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
<li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
<li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
<li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
<li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
<li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
</ul>
</div>
<div class="hidden md:flex items-center justify-center mt-8">
<img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
<span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #e2e8f0;
}
}
</style>Related Components
Table of Contents Component 34
A responsive Table of Contents component styled with Material Design, featuring dark theme support and using Tailwind CSS.
Table of Contents Component
Responsive Table of Contents component with Skeuomorphism design, Pastel color scheme, and dark mode support, suitable for portfolios.
Table of Contents Component
A responsive Table of Contents component designed with skeuomorphic elements and earth tones for a portfolio showcase, with dark mode support.