Содержание
Отзывчивый компонент Table of Contents, стилизованный под Glassmorphism, с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия и поддержкой темных тем. Включает разделы и изображения-заполнители для визуального представления.
HTML-код
<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>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент Table of Contents со скевоморфизмом, пастельной цветовой гаммой и поддержкой темного режима, подходит для портфолио.
Компонент «Оглавление»
Минималистичный и отзывчивый компонент Оглавления, стилизованный под Tailwind CSS, поддерживающий темный режим и отличающийся чистыми элементами дизайна.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.