3D Table of Contents Component
A responsive Table of Contents component designed for e-commerce, featuring 3D design elements and a complementary color scheme. It includes interactive elements and supports dark mode.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Table of Contents</h1>
<ul class="space-y-4">
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50" alt="Item 1" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 1: Introduction</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=1" alt="Item 2" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 2: Features</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=2" alt="Item 3" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 3: Pricing</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=3" alt="Item 4" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 4: Support</span>
</div>
</li>
<li class="relative transition-transform transform hover:scale-105">
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://picsum.photos/50/50?random=4" alt="Item 5" class="w-12 h-12 rounded-full mr-3">
<span class="font-semibold text-gray-800 dark:text-white">Item 5: FAQ</span>
</div>
</li>
</ul>
</div>Related Components
Table of Contents Component
A responsive Table of Contents component designed in Material Design style with earth tones and dark theme support for business/corporate websites.
RetroEarthDashboardTOC
Responsive Table of Contents component with Retro/Vintage design, Earth tones color scheme, and dark mode support for dashboard use.
Table of Contents Component
A responsive Table of Contents Component styled with Neumorphism using Tailwind CSS, featuring dark theme support and showing placeholder images and avatars.