Содержание
Компонент оглавления с дизайном микровзаимодействий, аналогичной цветовой схемой, простой сложностью и назначением для социальных сетей. Адаптивный с поддержкой темных тем. Нет JavaScript-кода.
HTML-код
<nav class="p-4 bg-gray-100 dark:bg-gray-800">
<ul class="space-y-2">
<li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
<li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
<li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
</ul>
</nav>Связанные компоненты
Компонент 3D-оглавления
Адаптивный компонент Table of Contents, предназначенный для электронной коммерции, с элементами 3D-дизайна и дополнительной цветовой схемой. Он включает интерактивные элементы и поддерживает темный режим.
Компонент «Оглавление»
Адаптивный компонент Table of Content, выполненный в стиле Material Design с поддержкой земляных тонов и темных тем для бизнес/корпоративных сайтов.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, стилизованный под Material Design с яркими цветами, подходит для блогов и потребления контента, включая поддержку темного режима и множество интерактивных элементов.