Содержание Компонент 34
Адаптивный компонент Table of Contents, стилизованный под Material Design, с поддержкой темных тем и использованием Tailwind CSS.
HTML-код
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 1
</a>
</li>
<li>
<a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 2
</a>
</li>
<li>
<a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 3
</a>
</li>
<li>
<a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 4
</a>
</li>
<li>
<a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 5
</a>
</li>
</ul>
</div>Связанные компоненты
Компонент «Оглавление»
Отзывчивый компонент Table of Contents с дизайном в виде стекломорфизма и пастельной цветовой гаммой, подходит для дашбордов с визуализацией данных и панелей управления.
Компонент «Оглавление»
Отзывчивый компонент Оглавления, разработанный со скевоморфными элементами и земляными тонами для демонстрации портфолио, с поддержкой темного режима.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.