Компонент «Оглавление»
Чистый, минималистичный и отзывчивый компонент оглавления, вдохновленный швейцарской/международной типографикой, разработанный для документации и сайтов баз знаний, с теплыми нейтральными цветами и полной поддержкой темного режима.
HTML-код
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">
<div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
Contents
</h3>
<nav aria-label="Table of Contents">
<ul class="space-y-2 text-sm md:text-base lg:text-lg">
<li>
<a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
</a>
</li>
<li>
<a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.1. Installation Guide
</a>
</li>
<li>
<a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
2.2. Basic Setup
</a>
</li>
</ul>
</li>
<li>
<a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
</a>
</li>
<li>
<a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
</a>
<ul class="ml-4 md:ml-6 mt-2 space-y-1">
<li>
<a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.1. Customization
</a>
</li>
<li>
<a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
4.2. Integrations and APIs
</a>
</li>
</ul>
</li>
<li>
<a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
</a>
</li>
<li>
<a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
<span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
</a>
</li>
</ul>
</nav>
</div>
</div>Связанные компоненты
Компонент «Оглавление»
Адаптивный и темный компонент Table of Contents с цветовой палитрой в стиле ретро/винтаж, подходящий для платформ знакомств и социальных сетей. Он отличается приглушенной цветовой схемой и плавной навигацией с прокруткой.
Компонент «Оглавление»
Минималистичный компонент оглавления, разработанный с помощью Tailwind CSS, с адаптивными эффектами и поддержкой темных тем.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, стилизованный под Material Design с яркими цветами, подходит для блогов и потребления контента, включая поддержку темного режима и множество интерактивных элементов.