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 Component
A responsive Table of Contents component with a glassmorphism design and pastel color scheme, suitable for dashboards with data visualization and control panels.
Table of Contents Component
A responsive Table of Contents component styled in Material Design with vibrant colors, suitable for blogs and content consumption, including dark mode support and multiple interactive elements.
Table of Contents Component
Responsive Table of Contents component with Skeuomorphism design, Pastel color scheme, and dark mode support, suitable for portfolios.