Компонент «Оглавление»
Простой компонент 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>Связанные компоненты
RetroEarthDashboardTOC
Адаптивный компонент «Оглавление» с ретро/винтажным дизайном, цветовой схемой в земляных тонах и поддержкой темного режима для использования на приборной панели.
Monospace_Developer_TOC
Сложный, отзывчивый компонент оглавления с моноширинной/дизайнерской эстетикой, цветовой схемой в драгоценных тонах, оптимизированный для документации и сайтов баз знаний, с поддержкой темного режима.
Компонент «Оглавление»
Адаптивный компонент оглавления, стилизованный под Neumorphism с использованием Tailwind CSS, с поддержкой темных тем и отображением замещающих изображений и аватаров.