Компонент «Оглавление»
Простой компонент Table of Contents, выполненный в стиле Material Design, с использованием земляных тонов и поддержкой темного режима. Подходит для потребления контента в блогах.
HTML-код
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section1" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">1. Introduction</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section2" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">2. Overview of the Topic</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section3" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">3. In-Depth Analysis</a>
</li>
<li class="hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition duration-200">
<a href="#section4" class="block text-gray-800 dark:text-gray-200 p-3 rounded-md">4. Conclusion</a>
</li>
</ul>
</div>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент Table of Contents, разработанный в стиле Glassmorphism, с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, поддерживающий как светлую, так и темную темы с помощью Tailwind CSS.
Содержание
Компонент оглавления с дизайном микровзаимодействий, аналогичной цветовой схемой, простой сложностью и назначением для социальных сетей. Адаптивный с поддержкой темных тем. Нет JavaScript-кода.
Компонент 3D-оглавления
Адаптивный компонент Table of Contents, предназначенный для электронной коммерции, с элементами 3D-дизайна и дополнительной цветовой схемой. Он включает интерактивные элементы и поддерживает темный режим.