Table of Contents
A responsive Table of Contents component styled with Glassmorphism, featuring frosted glass-like translucent elements with blur effects and dark theme support. Includes sections and placeholder images for visual representation.
HTML Code
<div class="bg-white bg-opacity-30 backdrop-blur-md shadow-lg rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">Table of Contents</h2>
<ul class="space-y-3">
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section1" class="text-gray-900 dark:text-white">Introduction</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section2" class="text-gray-900 dark:text-white">Features</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section3" class="text-gray-900 dark:text-white">Installation</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section4" class="text-gray-900 dark:text-white">Usage</a>
</li>
<li class="p-4 bg-white bg-opacity-20 backdrop-blur-md rounded-lg hover:bg-opacity-30 transition duration-200">
<a href="#section5" class="text-gray-900 dark:text-white">Conclusion</a>
</li>
</ul>
<div class="mt-6">
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-lg">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-3 text-gray-700 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: rgba(255, 255, 255, 0.1);
}
.text-gray-900 {
color: white;
}
.text-gray-700 {
color: #e0e0e0;
}
}
</style>Related Components
Table of Contents
Table of Contents Component with Microinteractions design, Analogous color scheme, Simple complexity, and Social Media purpose. Responsive with dark theme support. No JavaScript code.
Table of Contents Component
A responsive Table of Contents Component designed with Glassmorphism style, featuring frosted glass-like translucent elements with blur effects, supporting both light and dark themes with Tailwind CSS.
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.